I have wordpress site, and i want change background, and i need two images to background
Example:
http://i.imgur.com/8HMY8al.png
I want it to body, code is now that:
body {
background: #fff;
color: #494949;
font-family: Arial,Trebuchet MS,Helvetica,sans-serif;
font-size: 12px;
line-height: 18px;
background: url(images/bg1.png) top left repeat-x #D3D5D4;
}
What i need add here?
i think bg2 need to fit to screen (site)
Seperate it into two div and apply different background for each div
You can set seperate background to html element and seperate one to body element.
With CSS3 tricks, you can apply multiple background to only one div. See this example :
body{
background:url(images/img.gif) no-repeat left top,
url(images/img.gif) no-repeat right top,
url(images/img.gif) no-repeat left bottom,
url(images/img.gif) no-repeat right bottom;
}
Careful with browsers compatibility. Hope it helped ;)
Related
In my CSS file I have the following piece of code but find the screen still not being covered.
The Edge is working good, but with the scroll bars. Footer also visible.
The Internet Explorer has a black portion at the bottom. When I click Alt making the menu items appear, the entire screen fills up and footer becomes visible.
The Google Chrome has an average of the two thus having the footer cut in two.
body {
font-family: Calibri;
font-size: 20px;
line-height: 1.428571429;
color: whitesmoke;
background-image: linear-gradient(to bottom, black, darkslategrey);
background: inherit center center fixed;
background-size: cover;
}
Add this property to your css:
body {
height:100vh;
}
I have a problem with setting a background image over my background color: Here is my example so that you can see what I mean: JSFiddle
Now here is the functional CSS part:
#tancan{
background-color: #ebebeb;
background-image: url('http://lamininbeauty.co.za/images/products/tancan2.jpg');
}
As you can see in the JSFiddle, the background image repeats. If I use no-repeat as a property, the image disappears.
Also, I want the background image to float to the right, and should the image be bigger than the containing div, how to I make it fit proportionally? - Like you would make an image tag <img/> fit by using width: 100% and height: 100%?
I don't want to use an HTML image tag, it would be much easier but there are several reasons I do not want to use it.
Try this - http://jsfiddle.net/vmvXA/17/
#tancan {
background: #ebebeb url('http://lamininbeauty.co.za/images/products/tancan2.jpg') no-repeat top right;
}
and to make the background image not exceed its parent container you can use background-size: contain - http://jsfiddle.net/vmvXA/22/
Here's the fiddle.
background:#ebebeb url('http://lamininbeauty.co.za/images/products/tancan2.jpg') no-repeat right top;
To make the code shorter, it is possible to specify all the settings in one single property. This is called a 'shorthand property'.
To make all pictures fit inside it's parent add the style property background-size:contain;.
Updated the fiddle.
You can't just add no-repeat to background-image, because background-image is a specific property that only refers to the image itself. If you want to add it all in one declaration, then set background:
background: url('http://lamininbeauty.co.za/images/products/tancan2.jpg') #ebebeb no-repeat top right;
or keep it all separate, up to you:
background-color: #ebebeb;
background-image: url('http://lamininbeauty.co.za/images/products/tancan2.jpg');
background-repeat: no-repeat;
background-position:top right;
background-size: contain;
I have an image that looks like this:
Is it possible to extend this image (perhaps inside a div) so that it would look something like this:
Thanks!
You can create a div of the same color using the CSS background-color property (I believe the hex should be ~#999). Then, position the image as a background-image within the div using the background-position: right property.
HTML
<div class="arrow">Home</div>
CSS
#arrow {
background-color: #999;
background-image: url('http://i.stack.imgur.com/QDCz4.png');
background-position: right;
background-repeat: no-repeat;
/* sets div dimensions/text styles */
height: 24px;
color: white;
text-align: center;
line-height: 24px;
float: left;
padding-left: 20px;
padding-right: 30px; /* slightly longer to account for background image /*
}
JS Fiddle: http://jsfiddle.net/fbBsz/14/
Get a vertical slice of the gray part of very top left of the arrow with having width:1px. Take that one px slice image and repeat it on -x.
Here is something you can practice with
Since your image does not have a gradient, you have a better chance of matching the color(s) you want with just using background color.
you can set it as a background to a div
#elem {
display:block;
width:200px;
height:20x;
background: url(/filepath/to/image.gif) right top no-repeat #ccc;
}
Just make sure the background color is the same as the dark grey on the gif
No, this is not possible in CSS. You must set the width of the containing element, set the background image's url and set the x-position to right and set the repeat to no-repeat. Then set the background color to the same as the button's foreground color. If the button foreground is a pattern, you will have to use another image as the background.
No, not with that image at least :-)
Looks like you could make use the "sliding doors" technique – see http://www.alistapart.com/articles/slidingdoors/ for a good article about it
I'm curently workign on this page and I'm trying to make the background repeat-y from a certain height but to no avail. If you look at the link's background (bottom area); you'll see that it leaves a an ugly space there, which is ugly. The CSS is as show below
body {
font-family:Calibri;
font-size: 16px;
margin: 0px;
padding: 0px;
background-color: #000;
background-image: url(images/bg.png);
background-repeat: repeat -200px 0px;
}
There's no way I'm aware of that makes the repeat skip some pixels. If I were you I would split them so the background-image of the body would be what the majority of it is now without the top. And then I would add a div to the top with these settings:
<div id="upperpart"></div>
in css:
#upperpart{
background-image: url(whatever it is);
width:100%;
height:how high it is
background-repeat: repeat-x;
margin-bottom: minus its height; <-- this will make everything below this div get ontop the div
}
After some mathematical thinking and experiments, the line of code below did the magic. I had to also watch where to cut it off with -1530px. Make sure you use the same background you used with the body tag.
html {
background: url(images/bg.png) repeat 0px -1530px;
}
html {
background: #9c9c9c url(../images/bg-bottom.jpg) center top;
}
body {
border-top:2px solid #fecd2a;
background:#9c9c9c url(../images/bg.jpg) repeat-x center bottom;
}
I need bg.jpg which is the large background with the black gradiantat the top, to be at the top and for the bg-bottom.jpg to be repeated at the bottom. How come this doesn't work, is there and easier way? Apart from creating one long image.
http://fluroltd.com/clients/harveys/latest-news/
Looks like you need to switch around your positioning and use a transparent background for the body tag:
html {
background: #9c9c9c url(../images/bg-bottom.jpg) center bottom
}
body {
border-top:2px solid #fecd2a;
background: transparent url(../images/bg.jpg) repeat-x center top;
}
Your CSS on the body should be
background: url("../images/bg.jpg") repeat-x scroll #9C9C9C;
I don't think adding a background to your HTML tag is going to get you anywhere. If I were you I would just make one super long, narrow-width image that will not possibly be exceeded by the length of your page. You can't have multiple BGs without using CSS3, which I personally wouldn't recommend.