I have the above image
I have to set it in such a way that it covers the entire page. I tried the following code.
margin: 0px;
background: url(../images/common/header/Background_color.png);
background-repeat:repeat-x;
background-attachment:fixed;
background-position:top center;
height: 100%;
width: 100%;
border: 0;
display:inline-block;
background-color: transparent;
But what I get is this.
It is not covering the entire page. At the bottom I am getting the white space.Could anyone help me? Thanks in advance.
Just change this
background: url(../images/common/header/Background_color.png); background-repeat:repeat-x;
To this
background: url(../images/common/header/Background_color.png); background-repeat:repeat;
try this :
background-size: cover;
Related
I want to create a background with repeated image using CSS
background: url(../images/bg.PNG) repeat;
The problem is that the images are very close to each other, how can I add a padding for every image?
html {
background: white;
}
body {
width: 639px;
height: 280px;
background: url(//www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=64&d=identicon&r=PG) silver;
background-repeat: space;
border: 1px dotted red;
margin: auto;
}
Don't think this is possible, can't you add a transparent space in bg.PNG ?
You cannot have spaces between the background images. But you can modify your image to have the spaces you want.
I have some dynamic images as a background for some divs. Those have variable widths and heights. In front of each such a div i have a radio button. There is a way to align through css each div to be exactly at the middle referring to the radiobutton in front of it? I cannot use fixed background height since there are dynamic and the height are different. I was trying to put background-size: 100% 100%; or background-size: auto;
Doesn't work
Any help is more than welcome, thanks!!!
Try:
background-position: center center;
=====
UPDATE:
It's a lot easier working with your fiddle!
Try this:
div.VISA_logo {
background: url("http://www.globalworkandtravel.com/sites/all/modules/customshare/includes/facebook.png") no-repeat;
}
div.VISA_CARTE_BLEUE_logo{
background: url("http://www.discoverireland.ie/App_Themes/DiscoverIreland/images/discoveries/button-add-trip-small.png") no-repeat;
}
div.MasterCard_logo{
background: url("https://s3.amazonaws.com/sugarstats/s3_avatars/7287/1234222094_norm.jpg") no-repeat;
}
div.AMEX_logo{
background: url("http://www.uappointment.com/images/google-small-icon.png") no-repeat;
}
div.PAYPAL_logo{
background: url("http://i.imgur.com/EqgOS.png") no-repeat;
}
div.VISA_logo,
div.MasterCard_logo,
div.PAYPAL_logo,
div.VISA_CARTE_BLEUE_logo,
div.MasterCard_DE_FR_UK_logo,
div.AMEX_logo {
width: 105px;
margin-left: 5px;
height: 42px;
float: right;
margin-right: 30px;
background-position:0 center;
}
How can I center my footer image when viewed by a mobile device? As it shows now, on an iPhone, the footer image is not centered.
http://driftcoffeehouse.com/test/
#footer .secondary {
background-image: url("http://driftcoffeehouse.com/test/wp- content/uploads/2014/02/footerbar.png");
background-repeat: no-repeat;
border-top: medium none;
margin: -13px 0;
padding: 30px 0 0;
}
This should fix it. I added this, background-position: top center;, to the #footer .secondary rule.
#footer .secondary {
background-image: url("http://driftcoffeehouse.com/test/wp- content/uploads/2014/02/footerbar.png");
background-repeat: no-repeat;
border-top: medium none;
margin: -13px 0;
padding: 30px 0 0;
background-position: top center;
}
Worked for me. Tell me if you have trouble implementing it. Hope this helped, if not just message me by commenting below my answer. :)
Edit:
Fiddle with the problem (Try resizing the fiddle pane to see the problem.)
Fiddle without the problem.
Well there's the necessary stuff to replicate the problem and show the solution.
I m really having a hard time displaying a background image on old IE versions (6-8).
Here is my code:
#top
{
background-image: url(http://some-domain.com/myimage.jpg) no-repeat;
background-color:#830703;
border-bottom: 1px solid #303130;
height: 128px;
width:100%;
overflow: hidden;
zoom:1;
}
I have tried it to write it in many different ways but it didn't work.
Does anyone have an idea?
Use the below.
#top
{
background: url(http://some-domain.com/myimage.jpg) no-repeat #830703;
border-bottom: 1px solid #303130;
height: 128px;
width:100%;
overflow: hidden;
zoom:1;
}
Hope this helps.
Use either one of the below
background-image: url(http://some-domain.com/myimage.jpg) no-repeat;
background-color:#830703;
background-repeat: no-repeat;
or
background: url(http://some-domain.com/myimage.jpg) no-repeat #830703;
please do follow
background:#830703 url('http://ssl.gstatic.com/gb/images/v1_53a1fa6a.png') no-repeat;
This should actually never show up correctly as you have a small syntactical error. you mixed background-image and background-repeat. Either use the background-shortcut or just split them up:
background-image: url(http://some-domain.com/myimage.jpg);
background-repeat: no-repeat;
I am looking to fix my second full width image (the one in the middle of the page) so that is fits horizontally the same as the one above in the header image. Can somebody double check my CSS so see if it is correct. It needs to auto resize to fit the screen like the header image above. When i view it on mobile it is not fitting correctly. Thanks for taking a look.
http://www.jobspark.ca
.fullWidthSectionBG {
background-image: url('http://static.squarespace.com/static/513d5347e4b0abff73be5264/t/519c45c4e4b084baf13d7e27/1369195972115/rocktruck2.jpg');
border-bottom: solid 1px #ddd;
border-top: solid 1px #ddd;
margin-left: -1600px;
margin-right: -1600px;
padding-top:20px;
padding-bottom:330px;
overflow: hidden;
background-position: center;
background-repeat: no-repeat;
background-size: auto;
}
You need to add the height on to your div I think. Here's the fiddle. I just added a height to the div and now it resizes fine... Is that what you needed it to do?
.fullWidthSectionBG {
background-image: url('http://static.squarespace.com/static/513d5347e4b0abff73be5264/t/519c45c4e4b084baf13d7e27/1369195972115/rocktruck2.jpg');
width:100%;
background-position:center;
height:575px;
}
Updated css (still resizes)
.fullWidthSectionBG {
background-image: url('http://static.squarespace.com/static/513d5347e4b0abff73be5264/t/519c45c4e4b084baf13d7e27/1369195972115/rocktruck2.jpg');
background-position: bottom center;
background-size: cover;
height:575px;
background-attachment: scroll;
background-repeat: no-repeat;
}