Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
i was trying to add a background image in a jumbotron,but it isn't working.anyone have any idea how to make it working i know i can do it in css with .jumbotron but i wanted to do it in the html using style tag
@section('title','| homepage')
@section('content')
<div class="jumbotron" style='background-image:url('42004077_762686035815613659_o.jpg '>
<div class="row" >
<div class="col-md-12" >
<h1>welcome to my blog</h1>
<p class="lead">thank you for visiting</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">popular post</a></p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
@foreach($posts as $post)
<div class="post">
<h3>{{$post->title}}</h3>
<p>{{substr($post->body,0,300)}}{{strlen($post->body)>300?"...":""}}</p>
<a class="btn btn-primary btn-lg" href="{{url('blog/'.$post->slug)}}" role="button">read more</a>
</div>
<hr>
@endforeach
</div>
<div class="col-md-3 col-md-offset-1">
<h2>sidebar</h2>
</div>
</div>
@stop
but this doesn't work.i have kept the iamge in the posts folder.maybe i need to place the image somewhere else.
ignoring for a moment the extra spaces at the end of the filename. Your image will be expected to be in the same 'folder' as your route.
route names and folders are not meant to mirror each other. You would be better putting it somewhere else and referencing it with a path that starts at the root (/)
sorry, that space occoured while while copying the code,it is done correctly in the files.okay i will give it a try.
<div class="jumbotron" style='background-image:url('42004077_762686035815613659_o.jpg '>
// should be
<div
class="jumbotron"
style="background-image:url('42004077_762686035815613659_o.jpg')"
></div>
<div class="jumbotron" style='background-image:url('/resources/views/pages/13217558_1113891742004077_762686035815613659_o.jpg')'>still doesn't work.
<div class="jumbotron" style="background-image:url('13217558_1113891742004077_762686035815613659_o.jpg')" >
still not working. st
check the quotes around the style element
then, look in your browser network tools and see if it is finding the image
you can't have a single quoted string inside another single quoted string, as @alenabdula showed use double quotes and single quotes
yes,i have been looking into source code every time i make changes, and and there is no link created.i am pretty sure it has something to do about the location of image.
yes,i have taken care of quotes,now.but it still isn't working.
and what about the other advice? Look in browser network tools...
it still isn't working
Please be more specific.
Are there any 404 errors in the console.
It's possible that it's a CSS issue. Try
<div
class="jumbotron"
style="background: url('42004077_762686035815613659_o.jpg') center center"
></div>
in the network tools it isn't creating a link of image. yes,it is possibly a css issue since everytime i reload the website,there is no change that in the jumbotron. i am pretty sure it has something to do with the location of image,anyone can explain me how to store in images??i mean which directory?for example my project name is blog,and jumbotron is kept inside the /resources/views/pages folder.and this is where i am storing the image.i tried changing the location and keeping the image in the blog directory and using /resources/view/ but it still didn't work.
@anmol anything in the public folder is publically accessible. You may create public/img/name-of-image.jpg and your CSS would take the shape of:
/* inline on style tag */
background: url('/img/name-of-image.jpg') center center;
/* css file */
background: url('../img/name-of-image.jpg') center center;
for pete's sake
if you look in the browser network tools, you should see a request to load the image.
presumably that request is met with a 404 not found error.
Look at the path it is trying to load the image from and compare it to where you have actually put the image. you can then change the css or move the image
Is that an unprintable reply?
i have tried every literal thing that i can do,even tried using css ,created a .jumbortron class in the css file and added background image in it but it still won't work.made a class called .img in the css file and added that class to jumbotron,still won't work. and the 404 error you were talking about,how would it show the path when it is not even creating the link.oh my god i am stuck so bad.
then i tried adding image to other page(about)and it was showing a little image ,broken image,a very tiny around 10px in height.but still is not working.
Please paste the source from the browser after you run this file.
Try giving absolute URL inside the url
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>travelogue | homepage</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link media="all" type="text/css" rel="stylesheet" href="http://127.0.0.1:8000/css/styles.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="https://www.facebook.com/Travelogue-1107871025939482/">travelogue</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="/">home <span class="sr-only">(current)</span></a></li>
<li class=""><a href="/blog">blog <span class="sr-only">(current)</span></a></li>
<li class=""><a href="/about">about</a></li>
<li class=""><a href="/contact">contact</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="/" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Hello anmol<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="http://127.0.0.1:8000/posts">posts</a></li>
<li><a href="http://127.0.0.1:8000/categories">Categories</a></li>
<li role="separator" class="divider"></li>
<li><a href="http://127.0.0.1:8000/logout">logout</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="jumbotron" style="background-image: url('/public/pics/fea.jpg');" >
<div class="row" >
<div class="col-md-12" >
<h1>Welcome To My Blog</h1>
<p class="lead">thank you for visiting</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">popular post</a></p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-7">
<div class="post">
<h3>anmol</h3>
<p>“Stuff your eyes with wonder, live as if you’d drop dead in ten seconds. See the world. It’s more fantastic than any dream made or paid for in factories.” – Ray Bradbury".</p>
<a class="btn btn-primary btn-lg" href="http://127.0.0.1:8000/blog/anmol" role="button">read more</a>
</div>
<hr>
<div class="post">
<h3>another</h3>
<p>The much awaited episodes have begun! Authentication is finally here. This is the first video in our series about authentication and in this video we will talk about how to get started and which files we will be using. We won't write any code in this video, it is all about learning how Laravel organ...</p>
<a class="btn btn-primary btn-lg" href="http://127.0.0.1:8000/blog/another" role="button">read more</a>
</div>
<hr>
<div class="post">
<h3>third post</h3>
<p>“Stuff your eyes with wonder, live as if you’d drop dead in ten seconds. See the world. It’s more fantastic than any dream made or paid for in factories.” – Ray Bradbury".</p>
<a class="btn btn-primary btn-lg" href="http://127.0.0.1:8000/blog/third-post" role="button">read more</a>
</div>
<hr>
<div class="post">
<h3>second post</h3>
<p>“Stuff your eyes with wonder, live as if you’d drop dead in ten seconds. See the world. It’s more fantastic than any dream made or paid for in factories.” – Ray Bradbury".</p>
<a class="btn btn-primary btn-lg" href="http://127.0.0.1:8000/blog/second-post" role="button">read more</a>
</div>
<hr>
</div>
<div class="col-md-4 col-md-offset-1" >
<h3 class="text-center">Word Of The Day:</h3>
<div class="text-center" >
<p><em> “Stuff your eyes with wonder, live as if you’d drop dead in ten seconds. See the world. It’s more fantastic than any dream made or paid for in factories.” – Ray Bradbury<em>".
</p>
</div>
</div>
</div>
<hr>
<p class="text-center"><em>copyright anmol - all rights reserved</em></p>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
@designerdinesh plz have a look at the source code.
is that the source in your browser? you will see it shows url() so is not being processed by blade. have you wrapped the path in blade tags?
sorry forget that last post
in your browser network tools you should see a request for the background image
<div class="jumbotron" style="background-image: url('/public/pics/fea.jpg');" >
in the url you make it absolute url, something like
<div class="jumbotron" style="background-image: url('http://127.0.0.1:8000/public/pics/fea.jpg');" >
also try pasting this ( http://127.0.0.1:8000/public/pics/fea.jpg ) in your browser u should get the image.
After this in the chrome dev tools under the Network tab you should see a image request which will help to find the problem and solve it.
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>travelogue | homepage</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link media="all" type="text/css" rel="stylesheet" href="http://127.0.0.1:8000/css/styles.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="https://www.facebook.com/Travelogue-1107871025939482/">travelogue</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="/">home <span class="sr-only">(current)</span></a></li>
<li class=""><a href="/blog">blog <span class="sr-only">(current)</span></a></li>
<li class=""><a href="/about">about</a></li>
<li class=""><a href="/contact">contact</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<a href="http://127.0.0.1:8000/register" class="btn btn-danger" style="margin-top:6px">Register</a>
<a href="http://127.0.0.1:8000/login" class="btn btn-primary" style="margin-top:6px">Login</a>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="jumbotron" style="background-image: url('http://127.0.0.1:8000/public/pics/fea.jpg');" >
<div class="row" >
<div class="col-md-12" >
<h1>Welcome To My Blog</h1>
<p class="lead">thank you for visiting</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">popular post</a></p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-7">
<div class="post">
<h3>anmol</h3>
<p>“Stuff your eyes with wonder, live as if you’d drop dead in ten seconds. See the world. It’s more fantastic than any dream made or paid for in factories.” – Ray Bradbury".</p>
<a class="btn btn-primary btn-lg" href="http://127.0.0.1:8000/blog/anmol" role="button">read more</a>
</div>
<hr>
<div class="post">
<h3>another</h3>
<p>The much awaited episodes have begun! Authentication is finally here. This is the first video in our series about authentication and in this video we will talk about how to get started and which files we will be using. We won't write any code in this video, it is all about learning how Laravel organ...</p>
<a class="btn btn-primary btn-lg" href="http://127.0.0.1:8000/blog/another" role="button">read more</a>
</div>
<hr>
<div class="post">
<h3>third post</h3>
<p>“Stuff your eyes with wonder, live as if you’d drop dead in ten seconds. See the world. It’s more fantastic than any dream made or paid for in factories.” – Ray Bradbury".</p>
<a class="btn btn-primary btn-lg" href="http://127.0.0.1:8000/blog/third-post" role="button">read more</a>
</div>
<hr>
<div class="post">
<h3>second post</h3>
<p>“Stuff your eyes with wonder, live as if you’d drop dead in ten seconds. See the world. It’s more fantastic than any dream made or paid for in factories.” – Ray Bradbury".</p>
<a class="btn btn-primary btn-lg" href="http://127.0.0.1:8000/blog/second-post" role="button">read more</a>
</div>
<hr>
</div>
<div class="col-md-4 col-md-offset-1" >
<h3 class="text-center">Word Of The Day:</h3>
<div class="text-center" >
<p><em> “Stuff your eyes with wonder, live as if you’d drop dead in ten seconds. See the world. It’s more fantastic than any dream made or paid for in factories.” – Ray Bradbury<em>".
</p>
</div>
</div>
</div>
<hr>
<p class="text-center"><em>copyright anmol - all rights reserved</em></p>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
@Snapey the request is not creating any link.the above is the source code from network tools.i don't understand when everything is working fine why is it not loading the image???the syntax is correct but it is not creating any path???
i tried a hosted file and it worked.so i am dead sure now,its about the location of the image.
Please follow these instructions (which are for Chrome)
right click web page and press Inspect
Select network tab
Refresh the web page
A list of things being loaded from the server will appear
Look for anything in red .
You should see a line for http://127.0.0.1:8000/public/pics/fea.jpg
Please or to participate in this conversation.