The code below is creating the desired background but duplicating it twice down the page. Why is this and how can it be prevented? I am testing this in Google Chrome.
body {
border-top-left-radius: 200px;
border: 20px solid black;
background: radial-gradient(at top left, lightgreen, blue);
}
Oriol is right, you have to add the background-repeat property to your CSS.
So just add background-repeat: no-repeat; and you should see that your background doesn't repeat. This also works for background images.
Good luck.
Use the following css
body {
border-top-left-radius: 200px;
border: 20px solid black;
background: radial-gradient(at top left, lightgreen, blue);
background-repeat: no-repeat;
}
You may need to mention background-repeat and background-size property.
Css
body {
border-top-left-radius: 200px;
border: 20px solid black;
background: radial-gradient(at top left, lightgreen, blue);
background-repeat: no-repeat;
background-size: cover;
}
Related
Basically, right now I have multiple images but only one at as a background image to my body (being a blue square) and I need to to end at the start of the footer, so underneath the footer is black but no matter what I do, it doesn't seem to help.
Here's an example http://bit.ly/1nKIee1 (on postimage)
I thought that maybe if I ended the body tag, then started the footer tag it wouldn't do it but that doesn't seem to fix anything.
CSS
.nav {
background-image: url(image/top.png);
background-repeat: repeat-x;
}
body {
background-image: url(image/blue.png);
background-repeat: repeat;
background-size: contain;
background-color: #000000;
}
footer {
background-image: url(image/footer.png);
background-repeat: repeat-x;
background-color: #000000;
font-size: 14px;
text-decoration: none;
text-shadow: #000000 1px 1px;
padding: 45px;
}
Thanks in advance - Shy ♥
Don't give background property to body instead of this use a div inside body upto footer and give these properties to that div for example
HTML :
<nav>......</nav>
<div class="container">......</div>
<footer>.........</footer>
CSS :
.nav {
background-image: url(image/top.png);
background-repeat: repeat-x;
}
container {
background-image: url(image/blue.png);
background-repeat: repeat;
background-size: contain;
background-color: #000000;
}
footer {
background-image: url(image/footer.png);
background-repeat: repeat-x;
background-color: #000000;
font-size: 14px;
text-decoration: none;
text-shadow: #000000 1px 1px;
padding: 45px;
}
If you set a background to the whole body, it will apply to the whole body…
And you can’t put a footer (or what so ever is displayed) outside the body.
I guess in your case I would create a div#pageContainer to put your page content, and apply the blue background to it with
div#pageContainer {
background-image: url(image/blue.png);
background-repeat: repeat;
background-size: contain;
background-color: #000000;
}
Here is a jsfiddle.
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;
}
Well, I have a website and the front page has this image repeated all the way down. While on Chrome, is only repeats once, just like I want it to.
body {
color: #999999;
background-color: #490000;
background:url('http://pigymunk.co.uk/bgasdf2.png') fixed, url('http://pigymunk.co.uk/bgasdf.png') fixed;
background-repeat: no-repeat, repeat;
background-position: left top, left top;
}
You have
background-repeat: no-repeat, repeat;
You can only specify either no-repeat or repeat - not both, e.g.
background-repeat: no-repeat;
Chrome supports CSS3 syntax allowing both but many browsers such as IE consider this invalid as it doesn't support it. (Remember CSS2 is standard, CSS3 is only partially supported)
Updated:
To create a layerd background you need to use layers surprise surprise :).
body {
color: #999999;
background-color: #490000;
background: url('http://pigymunk.co.uk/bgasdf.png');
background-repeat: repeat;
background-position: left top;
}
#logo {
height: 200px;
width: 220px;
background: url('http://pigymunk.co.uk/bgasdf2.png') no-repeat top left;
position: absolute;
top: 0px; left: 0px;
}
HTML:
<body>
<div id="logo"></div>
...
or better yet, don't use a background image for your logo as it won't appear when background images are turned off, e.g. for printing. Crop the image to the correct size for the logo and put it in the html
<body>
<div id="logo"><img src="http://pigymunk.co.uk/bgasdf2.png" alt="Piggymunk logo" /></div>
...
jsfiddle example: http://jsfiddle.net/ytL2w/
This works fine in IE9 for me:
body {
color: #999999;
background-color: #490000;
background: url('http://pigymunk.co.uk/bgasdf2.png') no-repeat fixed left top,
url('http://pigymunk.co.uk/bgasdf.png') repeat fixed left top;
}
Try this:
body {
color: #999999;
background-color: #490000;
background-image:url('http://pigymunk.co.uk/bgasdf2.png');
background-position: fixed;
background-repeat: no-repeat;
}
Is there any way to apply multiple background images using sprites?
something like the below code?
background-image: url("../images/button-sprite.gif"),url("../images/button-sprite.gif");
background-position: right -92px, 0px 0px ;
background-repeat: no-repeat;
font-size: 1em;
margin-right: 5px;
padding-right: 35px;
width:500px;
height:500px
You can have multiple background images
see the EXAMPLE
Here is my css:
.sprite_box
{
background:
url(http://i.imgur.com/On0lt.png) -162px -551px no-repeat,
url(http://i.imgur.com/On0lt.png) -200px -530px no-repeat,
transparent;
height: 24px;
width: 81px;
margin:5px;
}
Read about sprite here
Here you can create sprite image
Here you create css for your sprite image
Yes, you can have multiple background images, but it is limited to box items. There is some info on this at CSS3.info
Yes, you can. The shorthand method is less verbose:
.sprite {
background:
url(http://www.google.com/images/srpr/nav_logo41.png) 0 -243px no-repeat,
url(http://www.google.com/images/srpr/nav_logo41.png) 42px -93px no-repeat,
#ccc;
width: 160px;
}
Note that you can only state one background color, and you state it at the end of the declaration.
See it in aciton http://jsfiddle.net/TMHPh/
Is it possible to have both background-image and background gradient color applied together in 1 div tag? (CSS3 and above is ok)
I have the below code, the gradient background color does show up, but the background-image doesn't.
What am I missing?
background: -webkit-gradient(linear, left top, left bottom, from(#595959), to(#2e2e2e));
background-image:url('/uploads/image1.jpg') no-repeat;
-webkit-background-size: 33px 33px;
border-bottom:1px solid #636363;
height:39px;
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius: 10px;
Thanks,
Tee
The gradient property is part of the backgrounds module, so you need to specify background-image, not just background.
you'll want to use background size as well to ensure the background isn't full height.
For a simple example, have a look at www.Dartrite.co.uk.
Gradients are values that can be used in place of images. With backgrounds, the gradient is the value of the background-image property. So you can't have both an image and a gradient (though you can specify an image first and then override it with a declaration of a gradient for browsers that support gradients).
Using the :after & :before pseudo-selectors, you can have up to 3 different backgrounds, layered: http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/. Hope this helps!
Yes you can use background images with gradients, Like this:
.example {
height: 200px;
width: 200px;
background: url("http://i.stack.imgur.com/vNQ2g.png?s=50&g=1") no-repeat scroll center center, linear-gradient(45deg, #000, #F00) repeat scroll 0% 0% transparent;
}
<div class="example"></div>
Pretty much just using the background shorthand property with two comma separated values.
Its working fine check it
.example {
background: url("http://i.stack.imgur.com/vNQ2g.png?s=50&g=1") no-repeat scroll center center, transparent linear-gradient(45deg, #000, #f00) repeat scroll 0 0;
border-bottom: 1px solid #636363;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
height: 200px;
width: 200px;
}
<div class="example"></div>