I am trying to give a div class the background image of a header but it won't show up.
Please see:
http://jsfiddle.net/eqzro6s3/
[css]
.header
{
background-image: url('http://wpsites.net/wp-content/uploads/2013/12/Custom-Header-Image.png') no-repeat;
width: 100%;
}
[html]
<div class="header">
</div>
What am i doing wrong? Thanks in advance.
Elements with backgrounds need to have dimensions. They don't automatically size themselves to the background image.
.header
{
background-image: url('http://wpsites.net/wp-content/uploads/2013/12/Custom-Header-Image.png') no-repeat;
width: 100%;
height: ?????
}
background-image is just not a short-hand property, thus you cannot use more than one value:
.header
{
background-image: url('path.png');/* remove no-repeat from here*/
background-repeat: no-repeat; /*use no-repeat here*/
width: 100%;
}
Or, use it like this:
.header
{
/*short-hand method can have multiple values*/
background: url('path.png') no-repeat;
width: 100%;
}
Try this:
.header
{
background: #FFFFFF url('http://wpsites.net/wp-content/uploads/2013/12/Custom-Header-Image.png') left center no-repeat;
width:100%;
height:431px;
}
http://jsfiddle.net/csdtesting/eqzro6s3/1/
Js Fiddle
.header{
background: url('http://wpsites.net/wp-content/uploads/2013/12/Custom-Header-Image.png') no-repeat;
width: 100%;
height:432px;
}
change background-image: to background:
Related
I am not able to understand why in the background the image is not getting displayed.
body{
background-image: url('../Images/Chicken.jpeg');
background: cyan;
}
The path of the image is right. whats the problem then? but the background color is getting being displayed.
Because you override an image with the color. If you want to use them both:
body{
background-image: url('../Images/Chicken.jpeg');
background-color: cyan;
}
or you can combine them in to one line:
body{
background: cyan url('../Images/Chicken.jpeg');
}
.main {
background-image: url('https://image.shutterstock.com/image-photo/beautiful-water-drop-on-dandelion-260nw-789676552.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
height: 100vh;
}
<div class="main">
</div>
I am having difficulty trying to make the logo at the top of my web page change when I hover over it.
To be more specific, I have a logo at the top of my page, and I created another logo slightly different for when a user hovers over it.
Here is my code:
#top{
width:1366px;
height:100px;
background-color:#1e125b;
}
body{
background-color:white;
background-repeat:repeat;
margin: 0;
}
#top:hover{
background-image: url('Logo_hover.png');
}
The Logo_hover multiplies itself throughout the whole div, instead of simply changing the initial image. I understand that the background-image is not what I should be using for this problem but I cannot seem to find any other solutions.
#top:hover{
background-image: url('Logo_hover.png');
background-repeat: none
}
have you used this.onmouseover & this.onmouseout ?
<img src='your pic' onmouseover="this.src='your pic on mouse over';" onmouseout="this.src='your pic on mouse out';" />
.logo {
background-image: url("http://placehold.it/120x120&text=image1");
background-repeat: no-repeat;
height: 120px;
width: 120px;
}
.logo:hover{
background-image: url("http://placehold.it/120x120&text=image2");
background-repeat: no-repeat;
height: 120px;
width: 120px;
}
<div class="logo"></div>
#top{
background-image: url(logo.png);
background-repeat: no-repeat;
background-size: cover;
overflow:hidden;
width: 120px;
height: 120px;
}
#top:hover{
background-image: url(logo_hover.png);
}
i am trying to create a page that has a background image in between a header and footer will work on any screen size.
I have managed to create the page and it works fine on desktop screen. The problem i have is when I resize to mobile size screen then the background is repeated.
Here is my code:
div {
width: 100%;
height: 5886px;
background-image: url('services-yellow.jpg');
background-size: 100% auto;
background-repeat: none;
border: none;
}
Has the height attribute set at a specific height, but i am not sure how i can change this so that it works on all screen sizes.
The site can be viewed at: http://s116169771.websitehome.co.uk/testsite/
If somebody could please advise on how i could fix this, would really appreciate it.
Thanks in advance.
none is not a valid value for background-repeat, use no-repeat instead.
background-repeat property (MDN) (W3Schools)
Here is a list of possible values for background-repeat, you need:
background-repeat: no-repeat;
None doesn't exist for this property.
Use background-repeat:no-repeat
div {
width: 100%;
height: 5886px;
background-image: url('services-yellow.jpg');
background-size: 100% auto;
background-repeat: no-repeat;
border: none;
}
or simply short the code
div {
width: 100%;
height: 5886px;
background: url('services-yellow.jpg') no-repeat 100%;
border: none;
}
Change background-repeat: none; to background-repeat: no-repeat; none is not a valid value for background-repeat property.
Your code should be:
div {
width: 100%;
height: 5886px;
background-image: url('services-yellow.jpg');
background-size: 100% auto;
background-repeat: no-repeat;
border: none;
}
You can also use short hand css background property as follows:
div {
width: 100%;
height: 5886px;
background: url('services-yellow.jpg') no-repeat 100% auto;
border: none;
}
More Details
I have an image that I am showing on a page. Here is my css:
body {
background: url(./../imgs/beach.png) no-repeat;
background-size: 100%;
}
When I do this, everything shows just fine. I then try to show the same image in a div. Here is my html:
<body>
<div class="background-image"></div>
</body>
And here is my new css:
.background-image {
background: url(./../imgs/beach.png) no-repeat;
background-size: 100%;
}
But now nothing shows. I look in my network tab and I see that the image is available, but it is not showing on the page. What am I doing wrong?
It's because the div is 0 pixels tall, give it some height, for example:
.background-image {
background: url(./../imgs/beach.png) no-repeat;
background-size: 100%;
height: 100vh;
}
Since you are only using background you need to set a height/width on the div itself.
.background-image {
background: url(./../imgs/beach.png) no-repeat;
background-size: 100%;
height: */Your Value/*;
}
I would suggest remove background-size: 100%; .. instead add height and width as 100%.
body {
background: url(./../imgs/beach.png) no-repeat;
height: 100%;
width: 100%;
}
I have an image Which i need to show as background image with 100% width in footer of my webpage.But my image is getting cut at the right of the footer.
Here is my code in HTML..
<div id="footer" class="footer-shadow">
</div>
And here is the css.
.footer-shadow
{
position:relative;
background-image: url('../img/new_images/footer-bg.png');
margin-top:2px;
height: 220px;
width: 100%;
color: gray;
}
Please help me to correct it and make it responsive to suit all web page size .Thanks .
You can do simple this:
background: url('../img/new_images/footer-bg.png') center center no-repeat;
background-size: contain;
Try to use background-size:
.footer-shadow
{
position:relative;
background-image: url('../img/new_images/footer-bg.png');
margin-top:2px;
height: 220px;
width: 100%; /* it sets the div width */
color: gray;
background-size: cover; /* now bg image is full width */
}