Suppose I want to render an arrow in CSS, which should have a head, a tail and flexible width so it can contain text. I can of course create multiple divs to get what I want, but how can this be done in CSS3?
I can use multiple background images:
div.arrow{
background: url('arrowtail.png') left no-repeat, url('arrowhead.png') right no-repeat;
}
The html:
<div class="arrow">This text is on a transparent background</div>
This gives me an div with an arrow-head and tail, and a transparent middle-section.
It does not seem possible specify the color to the middle section.
With only one background-image, you could do this:
div.arrow{ background: red url('some_image.png') no-repeat; }
I know this is doable in lots of ways, but is the background-color property really lost from the shorthand definition?
No, it's not exactly lost from the shorthand declaration. You can still specify the background color, but only for the last (middle) layer (regardless of whether you put an image there):
div.arrow {
background: url('arrowtail.png') left no-repeat,
url('arrowhead.png') right no-repeat,
red;
}
Note that for your scenario, your images may have to have completely opaque backgrounds. The background color will show under any transparent pixels of your images.
jsFiddle demo
Declaring background-color separately, however, may be much better for your scenario as it lets you use different colors based on the same background images (if you're good with transparent pixels on the parts of your images to be filled with the CSS background color):
div.arrow {
background: url('arrowtail.png') left no-repeat,
url('arrowhead.png') right no-repeat;
}
/* Assuming your red arrow has this ID */
#red {
background-color: red;
}
jsFiddle demo
I find using multiple background images to be problematic for things like this. Have you considered using the :before and :after pseudo elements? I wrote up a quick example:
<style>
.arrow { display:block; margin:0; padding:0; width:200px; height:45px; line-height:45px; text-align:center; background:#ddd; }
.arrow:before { float:left; display:block; margin:0; padding:0; width:25px; height:45px; background:#ccc; content:''; }
.arrow:after { float:right; display:block; margin:0; padding:0; width:25px; height:45px; background:#ccc; content:''; }
</style>
<div class="arrow">This text is on a transparent background</div>
Just replace the background color in the :before and :after declarations to the arrow images you want.
I was able to add multiple background-images and background-color like this:
background: url(../images/vis.png) no-repeat right, url(../images/vis.png) no-repeat left #fff;
Related
I want a website to have a background color, and a background image that scales with the width, and keeps the aspect ratio. So far pretty easy:
body {
background-attachment:fixed;
background-color:#ff9999;
background-image:url(https://i.redd.it/x7hdjnmupu901.jpg); // random image from google search
background-position:top center;
background-repeat:no-repeat;
background-size:100% auto;
}
Now, is it possible with CSS to have the background image to the bottom side 'fade into' the background color? As in, have the bottom 50 pixels of the background image slowly lose alpha value, so it smoothly goes into the background color?
Here is a JSFiddle, if someone wants to see this / play around with it: http://jsfiddle.net/wkz1t2b3/5/
You could use linear-gradient to apply a second background-image, which is a gradient of your background color from 0 opacity to 100% opacity.
You can edit the 75% in the below linear-gradient to change the point at which the fade begins, and the 100% to adjust the point at which the background-color becomes fully visible.
body {
background-attachment:fixed;
background-color:#ff9999;
background-image: linear-gradient(to bottom, rgba(255,153,153,0) 0%,rgba(255,153,153,0) 75%,rgba(255,153,153,1) 100%), url(https://i.redd.it/x7hdjnmupu901.jpg);
background-position:top center;
background-repeat:no-repeat;
background-size:100% auto;
}
I'm afraid, if you want the fadding be attached to the background image in any screen size, you will need to add some extra elements, and be tricky with the CSS
But it still behaves as a background ...
Test screen resizings in : http://jsfiddle.net/wkz1t2b3/77/
body{
margin:0px;
background-color:#ff9999;
color:white;
}
#background{
width:100%;
position:fixed;
z-index:-1
}
#background img{width:100%;}
/* the body fade becomes visible only when the image is bigger than the viewport */
body::after{
background-image: linear-gradient(to bottom, transparent, #ff9999);
content:'';
display:block;
height:50px;
bottom:0px;
position:fixed;
width:100%;
z-index:-1;
}
#background::after{
background-image: linear-gradient(to bottom, transparent, #ff9999);
content:'';
display:block;
height:50px;
bottom:0px;
position:absolute;
width:100%;
}
<div id="background">
<img src="https://i.redd.it/x7hdjnmupu901.jpg">
</div>
It behaves as a background
I would like to have a color hidden behind the backgroun image so that when a user visits my site without the ability to view images or choose not to view images get a fairly consistent site. I have tried adding the color before and after the image but the color goes over my image. i have even tried using a color after the image, however the color colorizes the whole site background under everything.
.headerWrapper {
background: url(../images/headerBG.png) repeat-x;
width:100%;
float:left;
}
.header {
height:94px;
width:1000px;
float:left;
}
Your question is unclear as to the code that you have tried. But you should use the background-image and background-color CSS properties, as declaring background twice will overwrite any of the others
(Demo)
.headerWrapper {
background-image: url(../images/headerBG.png);
background-repeat: repeat-x;
background-color: rgb(50,150,250);
width:100%;
float:left;
}
Or include the color in the background line
(Demo)
.headerWrapper {
background: url(../images/headerBG.png) rgb(50,150,250) repeat-x;
width:100%;
float:left;
}
Repeat-x property for CSS is not working as required.
I have a 50px image (to be used as background image).
I take a 200px div and set the 50px image as background with repeat-x css property.
The problem I am facing is 4 images (4 * 50px = 200px) are correctly drawn and a little portion of the image is also drawn at the end. As I think this extra portion should not be drawn. Please help.
css property:
{
width:200px;
height:27px;
position:absolute;
background:url(./img/common/bg_grid.jpg) repeat-x left top;
background-size:50px 27px;
}
from above link you may find correct background image
There is a certain level of margin or padding that is inheriting its default value from the nested/parent elements. You need to reset them in order to get what you are looking for.
From your above code, For Instance,
{
width:200px;
height:27px;
position:absolute;
background:url(./img/common/bg_grid.jpg) repeat-x left top;
background-size:50px 27px;
padding:0; /* Reset values */
margin:0; /* Reset values */
}
EDIT:
As per the updated fiddle provided by the OP, below is the solution.
WORKING DEMO
The CSS Code Change:
<div style="width:900px;height:27px;position:absolute;top:150px;right:100px;background:url(http://i.stack.imgur.com/5ebiu.jpg) repeat-x left top;overflow:hidden;background-size:45px 28px;background-repeat: space;margin:0;padding:0"></div>
Hope this helps.
try this one
.content
{
display:block;
position:relative;
float:left;
width:1000px;
background:#ccc;
height:300px;
}
http://jsfiddle.net/c9j2D/7/
I need to figure out how to overlay an image of my logo on top of another repeating image that is being used as a background for the nag bar at the top of my site.
The CSS for the nag bar image looks like this:
.header {
background:url(../images/bg-header.jpg) repeat-x;
height:125px;
is there a way to add another image on top of this and have it aligned to the left side of the underlying image?
Something like this?
http://jsfiddle.net/aJEwZ/
<style>
.nav {
background: url(http://www.psdgraphics.com/file/light-wooden-background.jpg) repeat-x;
height: 250px;
width: 500px;
border:1px solid black;
}
img {
padding:20px;
}
</style>
<div class='nav'>
<img src="http://a.deviantart.net/avatars/h/a/haz-elf.jpg?1" />
hello</div>
Here you go.
here's a DEMO
and here's the CODE
Here's the css
.header {
background: url("http://fc04.deviantart.net/fs70/i/2013/266/7/3/sydneigh_logo_by_robberbutton-d6nmaox.png") top left no-repeat ,url("http://subtlepatterns.com/patterns/sandpaper.png") repeat-x;
background-size: 571px 125px, auto;
height:125px;
width: 100%;
}
notice how the background attribute has two shorthand backgrounds with images written out seperated by a comma. The first image is on top of the second image and so on.
The first property of attribute background-size only applies to the first property in the background attribute (the first image in the declared background attribute.) The second applies to the second image in the background attribute.
This works the same way with other background-properties such as background-repeat, and background-image.
Here's an article on having multiple background images:
http://www.css3.info/preview/multiple-backgrounds/
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.