I am new to web development and I want to display an image for my background.Only problem is that my image will not show, may you please help me. Below is my code
<style type="text/css">
.bgimg {
background-repeat: no-repeat;
background-size: cover;
background-image: url("worldtravlerissue1.jpg");
min-height: 90%;
}
</style>
1)Be sure the div has a concrete width and height, if you're using % be sure the image div is inside another with a height and width declaration on css
2)Be sure you've declared the right class
3)Be sure the img url is right and you're reaching the right path
.img{
width:400px;
height:300px;
background-image: url(https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/RGRIEDX4IU.jpg);
background-size:cover;
}
<div class="img">
</div>
You're image might not be showing because either you have the wrong name for it, wrong extension as in assuming its a .jpg rather than .png or .jpeg or its not in the same directory as your HTML file. Make sure they are in the same folder or directory a.k.a Desktop.
If you have your HTML file on your desktop and the picture is in a different folder, you'd have to do
background-image: url("NAMEOFFOLDER/worldtravlerissue1.jpg");
Hope that helped.
Related
I am quite new to the css and bootstrap i have searched and tried the w3c solution and also the SO but did not work well. Actually i want to have an image as a background on my homepage. on which there would be my content like 3 small buttons/icon in the middle of the page.
I have tried this
<div id="homepage">
</div>
css:
#homepage{
background: url(../images/homepage.jpg);
background-size: 100% 100%;
background-repeat: no-repeat
}
but it is not working.
2nd Solution:
Second thing which i tried was to include a img tag then add my content and drag to the middle by absolute position which i think is not a good way because responsiveness did not remain there.
Can any one help me in this regard.
Assuming you double checked the image path,I think the problem is the size of the div.
try giving your div a fixed width and height in order to test if at least this way the image is showing.
<div id="homepage" style="width:500px;height:300px">
</div>
Then check out how to use the bootstrap grid system in order to make your div as big as you wish.
You can try this:
#homepage{
background: url(https://paulmason.name/media/demos/full-screen-background-image/background.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
width: 100%;
}
http://jsfiddle.net/y558vo9a/
if you want the background image to be in your index page, there is no need in adding '../' and no need in adding background-size, -repeat when you can actually set your code so;
background: url(images/homepage.jpg) no-repeat 50% 50%;
but if it works for you, you can use it so. And i also noticed, you forgot to close your background-repeat with ';'
What is wrong with my code? I am using a PHP file for header and then I am including it where is needed.
This is the CSS I have:
header {
margin-top:0;
height: 200px;
background-image: url("slike/dekorativni.jpg");
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
When I set the background to some color it is showing colored background but image won't show.
Is it OK to put !DOCTYPE HTML in a PHP file inside an echo?
Try to change to Relative URLs. It may happen that your included file is not loading the css or the image path after including is not working. If you use Relative URL to the image path it must work. Please check also if your css is being load in the included file, check if fonts and other formats are working.
I have a thymeleaf template where I don't have CSS files imported and wanted to declare style attribute for the body element with background-image: url{/image.jpg} property with relative image URL. I wanted to load the URL without including the application context name(/myapp/) it. It is similar to the problem over here, except it din't work for me.
CSS:
<style>
body {
background: url(../img/Background.jpg)
no-repeat center center fixed;
background-size: cover;
}
</style>
But the above CSS doesn't work and it accessed the image at
http://localhost/img/Background.jpg.
So, I had to give the value as url(/myapp/img/Background.jpg) for the image to load properly.
I have the mvc:resources configuration properly set in spring-context.xml for /img/ request to load properly and it works in other places.
spring-context.xml
<mvc:resources mapping="img/**" location="/WEB-INF/img/" />
So how to load the background url image css value dynamically using thymeleaf's relative url?
So, here's how to set dynamic relative paths in background image url property in the css using thymeleaf's inline text value,
<style th:inline="text">
body{
background: url{[[#{/img/Background.jpg}]]}
no-repeat center center fixed;
}
</style>
which loads the image using relative path and we don't have to specific the 'myapp' context name in the url.
In my case that helped:
change brackets from curly to round
<style th:inline="text">
body{
background: url([[#{/img/Background.jpg}]])
no-repeat center center fixed;
}
</style>
An alternative is:
<body th:style="'background: url(/img/la-paz-city.jpg) no-repeat center center fixed;'">
...
</body>
that is all 😉
<body th:style="'background-image:url(' + #{/images/background.jpg} + '); background-repeat: no-repeat, repeat; background-size: cover;'">
</body>
I'm putting the finishing touches on a website for a friend. They would like to have cycling set of background images show up on their 'featured' page. I've tested that - NO PROBLEM. What's happening though is that the background image is taking over the content on the rest of the page.
I'm using Squarespace. This is the HTML that I've got so far:
<div id="background-wrap"></div>
<div class="with-bg-size" style="position:fixed; top:0px; left:0px; z-index:900; width:100%; overflow-y:hidden; overflow-x:hidden; margin:auto;"></div>
And the CSS looks lke this:
body {height:100%; overflow-y:hidden;}
.with-bg-size
{
background-image: url('https://dl.dropboxusercontent.com/u/10022474/events.jpg');
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}
Now, that background image that I've placed takes over the rest of the content including the nav, so I'm stuck. Is there anything that I Can do?
It's difficult to say without more knowledge of the HTML around this example, but first thing I would do is move the div.with-bg-size to the beginning of the HTML structure and remove the z-index style from it.
I feel retarted for even having to post something like this but for being a vet in css I have no idea why this time I can't get an image to show in the background of a div. Here is what I have
#leadarea {
background-image:(images/submarines-for-sale-at-seamagine.jpg);
background-repeat: no-repeat;
background-position:center;
height:360px;
width:1160px;
}
<div id="leadarea"></div>
I have triple checked my path to the image and its correct. In the same directory of the file I have an folder called "images" and the file to that image. If I type in the full url to that image in a browser I can see the image. Why is my div not showing that image?
The proper syntax is:
background-image:url('images/submarines-for-sale-at-seamagine.jpg');
Also notice that the path is relative to the .css file placement.
Put the url in your background-image
background-image: url("your-image-path.jpg");
Try this to optimize your background definition in one line:
#leadarea {
background: transparent url("http://1.bp.blogspot.com/-5PauJ-PHxns/UVjwME0X9YI/AAAAAAAAA4s/lsd9ZRsfCnE/s1600/coelho+escolha.jpg") no-repeat center;
// background: color url("your-image-path.jpg") repeat position;
height: 400px;
width: 400px;
}
Check the example here: http://jsfiddle.net/R5cJp/2/