I have the following png file (see First Image). I need to add a blue overlay to the background so that it looks like the second image. How can I do that using CSS?
The best supported cross-browser way to accomplish is to actually make two images, one blurry and the other not blurry, and then cascading them atop one another.
body {
background: url(images/bg-solid.jpg) no-repeat;
}
#page-wrap {
background: url(images/bg-blurry.jpg) no-repeat fixed;
width: 500px; margin: 40px auto;
}
Related
I'm attempting to create a background for a webpage that takes advantage of the gradient options in CSS3. What I want it to do is use a gradient that fills the full height of the screen, and then if the screen is scrolled beyond that, to just use the final color.
Unfortunately, all of my attempts end up with either the gradient repeating or staying fixed. Neither of these are acceptable for what I have in mind.
Could any of you help me? The closest I could get so far can be found below, but obviously it stays fixed. Everything else I've tried has pretty much had a repeating issue, even with no-repeat thrown into the mix.
html {
height: 100%
}
body {
background: gold no-repeat linear-gradient(silver, orange, gold);
background-attachment: fixed;
min-height: 100%;
margin: 0px;
}
You could make use of multiple backgrounds and stack them like in the below snippet where the first background is your linear-gradient and the second one is a solid color (which is same as the linear gradient's end color).
By not repeating the gradient (using the no-repeat), we can limit the gradient to be present only for the screen's height whereas the solid color background would by default run through the full size.
Here is what MDN says about multiple background stacking: link
These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.
(emphasis is mine)
html {
height: 100%;
}
body {
background: linear-gradient(silver, orange, gold, red) no-repeat, gold;
margin: 0px;
}
/* Just for demo */
div {
min-height: 200vh;
}
<!-- Library included just to avoid prefixes so that users with older browser can view -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>
Some content....
</div>
Note: I have added a red end color to the linear-gradient just to show how the solid color takes over from the point where the gradient ends.
Actually, it would look like this:
html {
height: 100%;
}
body {
background: linear-gradient(red, orange, gold) no-repeat, gold;
background-size: 100%;
margin: 0px;
}
div {
min-height: 200vh;
}
Here is a fiddle https://jsfiddle.net/v14m59pq/163/
Hope this help you man.
If you want that effect, you need two layers, back layer with the final color and the top layer with the gradient.
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
background-color: gold;
}
body {
height: 100%;
background: gold no-repeat linear-gradient(silver, orange, gold);
}
I use the html with a gold color and the body with the gradient, simply means, the parent the main color and the children the gradient with the full viewport height.
Check link to see the result :)
http://codepen.io/TibicenasDesign/pen/VLywpL
I am using the Electoral template from ThemeForest here, this is the original template. I am trying to use CSS to fade out the edges of the blue image to the right, however the change is affecting the entire container. I've changed the background color to reflect the undesired behavior at the first link.
What I want to do is be able to apply CSS instructions to just the image. This is the section that controls the container:
#hero .q-container {
position: relative;
padding-top: 8%;
background-image: url(../img/sam.png);
background-repeat: no-repeat;
background-position: bottom 30% right 10%;
background-size: 30%;
}
I tried using the following but it didn't work:
#hero .q-container img {
background-color: red;
}
Does anyone have any ideas to fix this? Thanks!
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/
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 would like to create a sprite with several images that will be used as background. Some of them will be used with norepeat and some will have repeat-x.
What's the best way to setup such styles?
So far I've tried this but it does not work properly:
css
.sprites {
background-color: transparent;
background-image: url(img/sprites.png);
background-repeat: no-repeat;
}
.bg {
width: 1px;
height: 25px;
background-position: 0 0;
background-repeat: repeat-x;
}
html
<div class="sprites bg">
</div>
Is this even possible?
I think the best way to go for this is to separate the nonrepeated Bgs from repeated ones. put all norepeated bgs in one sprite image. For repeated ones, you can only put them together if they have the same width, and you have to place them vertically.
If you will only be repeating in the x-direction, make sure you place the images vertically. That is, don't place two different images side-by-side.
http://www.phpied.com/background-repeat-and-css-sprites/