I have kind of a hard problem here (I think). Assume the following HTML:
<div id="page">
<div id="menubar"></div>
</div>
With the following CSS defined on it:
#page {
background: url("some-image.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#menubar {
background-color: rgb(36, 108, 228);
background-color: rgba(0, 50, 255, 0.6);
}
In words, I have a page div with a fully covering background image and a menubar with a 60% opacity, so the background of div #page shines through the menubar. However, I would like to have the background shining through the menubar AND invert the colors of the background where it shines through the menubar.
I could not find a solution online, since the invert filter can only be applied to entire images as far as I am aware. So therefore, I really hope that someone on SO knows some nice trick to pull this of.
Thanks in advance!
Technically you don't need to "target" the parent's background image.
In CSS you can just inherit the properties of the parent into the child element.
#page {
background: url("http://lorempixel.com/1280/720/nature/") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* Copy the parent's image properties */
#menubar {
background: inherit;
}
Another option would be to just have #page and #menubar selectors on the same declaration.
#page, #menubar {
background: url("http://lorempixel.com/1280/720/nature/") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Either way, once you give the #menubar the same background, you can add another rule to invert the colors on the #menubar.
#menubar {
-webkit-filter: invert(100%);
filter: invert(100%);
}
JSFiddle
Note: Added invert and background color to the the child element just inside the #menubar to revert the colors.
Related
In a website, I want to have a background image , then apply a pattern to it, and then apply a color or gradient to it, Ive found this css code which works, but not sure how to apply the color
.body {
background: url(pattern.png) top left repeat, url(backgroundimage.jpg) top left no-repeat;
background-attachment: fixed;
background-position: top left;
-webkit-background-size: auto, cover;
-moz-background-size: auto, cover;
-o-background-size: auto, cover;
background-size: auto, cover;
}
Any help applying the color or gradient to it
thx
If you want give gradient over image then try
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('Your image')top left;
i have this issue with bootstrap 4: i'm working on a web page and i've put a fixed background with css. I want to put multiple <div> one under another, with some transparent space between them, in order to see pieces of the background image in these transparent spaces. The problem is that bootstrap (i guess) makes every kind of background text to be white-coloured so the transparent thing doesn't work. I created a "spazioVuoto" class in css that should make the background transparent, but it doesn't. Can anyone help me?
PS. if you want to see an example of what i'm talking about, look at http://it.diesel.com/it/
here is a codepen example https://codepen.io/anon/pen/ooJqVK
this is my code
html {
background: url(img/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.spazioVuoto {
background-color: transparent;
padding: 5em;
}
The problem here is that your body have a backgournd-color:#fff, so even if spazioVuoto have background transparent the color will be still white because of that. Try to change it (spazioVuoto background-color) to red and you will see that it will work. So you have to put the body background to transparent and then work on other containers to set their background-color.
html {
background: url("w3schools.com/w3css/img_fjords.jpg")
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
background-color:transparent !important;
}
.spazioVuoto {
background-color: transparent;
padding: 5em;
}
.container {
max-width: 100% !important;
background-color: #fff;
width: 100% !important;
padding: 1% 20% !important;
}
I'm trying to create a page with a centered background image and using the position center center. But instead of appearing centered both vertically and horizontally the image appears to extend vertically beyond the top of the page. Where/why am I going wrong?
<!DOCTYPE html>
<html>
<style>
body
{
background-image:url('tumbleweed.jpg');
background-repeat:no-repeat;
background-position:center center;
background-color:#EAEAEA;
}
</style>
</html>
Would you see the screen like below picture?
body{
background-image:url(../IMG/BG/pizzaBackground.jpg);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
I think It's because you didn't declare 'height'.
Add 'height:100vh'style.
body{
height: 100vh; /* ADD STYLE ! */
background-image:url(../IMG/BG/pizzaBackground.jpg);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
The reason for setting to 100vh is because the target is body tag.
If it's a different tag, use a different value.
Then this will be
And add 'margin:0px' style to remove the scroll.
body{
margin: 0px; /* ADD STYLE ! */
height: 100vh;
background-image:url(../IMG/BG/pizzaBackground.jpg);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
Then you can see
Thanks!
You can use cover
background-image:url('tumbleweed.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
http://jsfiddle.net/ou10gmfd/
Try this:
background-position: 50% 50%;
Or maybe you should try a space before the first center (could be an issue).
Most likely this is because your image is to large use background-size: cover; to cover the whole background of the body
remove DOCTYPE html from your page and it will work fine.
or use background-attachment: fixed;. then you do not have to remove DOCTYPE html
I have a css class that has a back ground image. I want to fix the background's image's max width to 1024px and use background color to render as the browser extends beyond that. Is there a way I can do that?
Right now, I have
background-size: cover;
And, it distorts the image height beyond 1024px.
.imageform {
width: 100%;
display: inline-block;
background: url("http://i.imgur.com/FPmyviO.jpg") no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: #000;
}
JSfiddle: http://jsfiddle.net/fwkqos0c/8/
You have to change
background-size:1024px;
and ypu missed
background-repeat: no-repeat;
I'm trying to place a fullscreen background image combined with a repeating background image without the use of J-query. Is it possible?
This is the code I use to get my image fullscreen:
body {
background: url(../img/bg1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
But now I want this completely overlapped by a .png image background that needs to have a repeat function, for the simple reason that the .png contains lines which will rescale and look awful on certain screen sizes.
Any ideas?
Already tried:
Giving html a background and body a background, it will only display one of both.
Be aware that multiple backgrounds won't work on ie8 if needed:
http://caniuse.com/multibackgrounds
This answer will work on every browser:
You must give width and height to the elements.
You can see answer here: http://jsfiddle.net/Rc38f/
HTML Code:
<html>
<body>
<div id="wrapper"></div>
</body>
</html>
CSS Code:
html {
width: 100%;
height: 100%;
}
body {
background-image: url('http://www.colourbox.com/preview/4632391-637684-seamless-small-white-flowers-pattern-background.jpg');
background-repeat: repeat;
width: 100%;
height: 100%;
}
#wrapper {
background: url('http://i.telegraph.co.uk/multimedia/archive/02403/Jonstockshooting_2403237b.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
}
It is possible to include two background images on one tag.
How it Works
Multiple background images can be specified using either the
individual background properties or the background shorthand property.
This should be a Helpful resource to get you started.
css:
body {
background-image: url(http://www.wallcoo.com/paint/Chiplegal_vector_art/images/%5Bwallcoo.com%5D_vector_art_0seasons.jpg), url(http://nopgc.org/v2/images/body_bg.jpg);
background-position: top center, center;
background-repeat: no-repeat, repeat;
width: 100%;
height: 100%;
}
fiddle: Demo