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.
Related
I want to add a brushstroke image behind certain words in a paragraph like this example: https://i.stack.imgur.com/KzjGn.png. I've tried adding a simple background to a span but the image extends past the padding and gets cut off. Eg:
.highlight1 {
background: url(ImageUrl.png);
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 0;
margin: 0;
}
Any help would be great!
Thanks!
That code should not cause the background image to get cut off. It will, however distort the image which might not be desirable.
You may want to add some padding so that the text is inside the brush stroke.
padding: 5px 20px;
Or something like that.
I tested it as follows, and it seems to work:
* {
font-size: 30px;
}
span {
background: url('https://www.onlygfx.com/wp-content/uploads/2017/04/grunge-brush-stroke-banner-2-17.png');
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 5px 20px 10px 20px;
margin: 0;
color: white;
}
<p>
This is a <span> Test </span>
</p>
Use background-size: cover;
p {
font-size: 2em;
}
#abc {
background: url("https://i.stack.imgur.com/KzjGn.png");
background-size: cover;
}
<p>aaaaa aaaaa aaaaa <span id="abc">aaaaa</span> aaaaa aaaaa aaaaa</p>
I have an 256x256 image called myImg.png. I want to make an hr element that uses repeating 16x16 versions of myImg.png.
My CSS so far:
hr#target {
border: 0;
height: 15px;
background-color: #333;
background-image: url(myImg.png);
background-repeat: repeat-x;
overflow: hidden;
}
But this only shows two repetitions of my image at the full 256x256 size where I can only see 15px of it.
How do I make an hr where the background image is a row of small versions of myImg.png?
Use background-size as in:
hr#target {
border: 0;
height: 15px;
background-color: #333;
background-image: url(myImg.png);
background-repeat: repeat-x;
background-size: 16px 16px;
overflow: hidden;
}
As #bjskistad mentioned, you should really be using an image that's already sized correctly.
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;
}
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/