I am looking for some help. I have built a site where I want to have a patterned background image (works fine) but, I want to have a border image on top of the background image across the top.
I have tried using position: absolute and setting the z-index on each element but each time it cuts the background image in half and doesn't overlay at all.
Help!
Here's the code I have so far. I am new to coding so excuse any poor code!
body {
color:#787371;
background:url(images/line-top.png) repeat-x top;
position: absolute;
z-index: 1;
}
#bodychild {
background:url(images/bg-body.jpg);
border:0;
position: absolute;
z-index: 10;
}
use multiple backgrounds:
body {
background:
url(http://subtlepatterns.com/patterns/dark_fish_skin.png) center top repeat-x,
url(http://subtlepatterns.com/patterns/food.png) center top repeat;
}
more info: http://css-tricks.com/stacking-order-of-multiple-backgrounds/
Related
In my angular project I have following task to do.
This is just a design template, not my actual code.
So far I have made the right picture by having a div and setting the background image.
But now I dont know how to put a dark layer on the page (like on the left side). The logic is no problem, but I dont know how to achieve it with CSS.
How do I do it?
You can do this really simply let's suppose you have a div and you can style according to following rules, you can also replace with your element id or css class with div:
div{
position:relative;
}
div:after {
position: absolute;
background: rgba(0,0,0,0.3);
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
}
You can put a div over your image and style it the way you want it to.
If you make it black and put opacity on the element, it will get more transparent, which makes it look like its a little darker
Note that you will have to have the z-index set accordingly for it to work.
example:
overflow: hidden;
height: 100%;
z-index: 2;
Alternative you could try to add a shadow with background: linear-gradient()
example:
background: linear-gradient(to top, #3204fdba, #9907facc), url(https://picsum.photos/1280/853/?random=1) no-repeat top center;
I want to display some random design images on my sites background as background-image, problem now is that every time I place such an image it somehow interacts with nearby boxes etc.
I just want my design images (small icons etc) to be part of the background without getting in touch with other non-design elements like text, boxes etc.
Something like that I guess:
body {
min-height: 100vh;
position: relative;
height: auto;
width: auto;
background-image: url("/static/pattern.jpg");
background-repeat: repeat;
z-index: -10;
} -> "The actual background of the site"
.design_element_01 {
position: relative;
z-index: -1;
background-image: url("/static/xyz.png");
max-width: 100px;
} -> "The design element that should get placed onto the body background from above"
Try:
.design_element_01 {
position: absolute
/*...*/
}
In addition, you might need to change max-width to width, since a background doesn't provide width to the element.
Centering the Background
There are a few different approaches to centering the background. I'll outline one here; if it doesn't work for you, I can describe others.
Essentially, the idea is to make the .design_element_01 element itself take up the entire page. Then, background-size can be used to constrain the size of the background, and background-position can be used to center it. A basic example would be:
.design_element_01 {
position: absolute;
top: 0;
left: 0;
background: url("/static/xyz.png");
width: 100%;
height: 100%;
/* I'm using 100px here since you used max-width: 100px, but you can use whatever you want. */
background-size: 100px;
background-position: center;
background-repeat: no-repeat;
z-index: -1;
}
(Do note that I haven't tested this; you may need to tweak it.)
If you test this example, however, you will notice that this centers the background on the screen, but not necessarily the entire page. This may or may not be what you want. If not, you can change the <body> element's position property:
body {
position: relative;
}
This should cause the .design_element_01 element to be positioned relative to the <body> element.
I also created a JSFiddle example to demonstrate the solution: https://jsfiddle.net/mouqewzv/.
Finally, if you don't want your element completely centered, but just offset from the center, you could tweak the left and top properties of design_element_01 to position the background initially at the center, but then offset it.
Try setting your design_element_01 position to absolute NOT relative
and then try to place it however you want using
left:
right:
top:
bottom:
z-index:
Hope this works!
I have two background jpeg images that are repeated vertically across the entire left and right borders of my website.
Here is my code:
.gradients {
background-image: url("outer-gradient.jpg"), url("outer-gradient-horizontal-flip.jpg");
background-position: top left, top right;
background-repeat: repeat-y;
}
<body>
<div class="gradients">
<div> website content in here </div>
</div>
</body>
This is what it looks like:
left and right background images
I need a way to make both of these jpegs transparent.
Please don't suggest I just use CSS gradients, I cannot use CSS Gradients because of the color complexity needed to make the left and right images the way they were. These jpegs have hundreds of colors for a richer gradient than any CSS Gradient could make.
I've seen methods of making a single background image transparent by adding an opacity div in front or behind it. How would I do this for my .gradient div, when I have two background images?
I need a way to make both of these jpegs transparent.
As you can't simply give opacity to the gradients div, which would affect the website content as well, you could use pseudo elements, like this, which will not effect the website content
.gradients {
position: relative;
padding: 0 60px; /* for this demo, push the content off the image */
}
.gradients::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 50px; /* width of your jpg file */
height: 100%;
background-image: url(http://placehold.it/50/00f);
background-position: top left;
background-repeat: repeat-y;
opacity: 0.5;
z-index: -1;
}
.gradients::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 50px; /* width of your jpg file */
height: 100%;
background-image: url(http://placehold.it/50/f00);
background-position: top right;
background-repeat: repeat-y;
opacity: 0.5;
z-index: -1;
}
<body>
<div class="gradients">
<div>
website content in here<br>
website content in here<br>
website content in here<br>
website content in here<br>
website content in here<br>
website content in here<br>
</div>
</div>
</body>
I'm not sure what this means:
These jpegs have hundreds of colors for a richer gradient than any CSS Gradient could make.
If you can make them in Photoshop, you can make your gradients in CSS. A gradient is by definition hundreds of colors, as it transitions from one to another (and potentially another). The screenshot you've shared is definitely able to be reproduced using CSS gradients.
However, since you've asked to rule that out, I'd suggest using 24-bit PNGs instead of JPGs. 24-bit PNGs have an alpha transparency channel which would allow you complete control over how transparent they are overall, and how transparent they are per-pixel. There is no background-transparency property at this point, so what you're trying to accomplish can't be done with the HTML markup you have and CSS.
The third option is to have an empty div with opacity for your background:
<div class="gradients"></div>
<div>Website content here</div>
html { height: 100%; }
body { min-height: 100%; position: relative; margin: 0; }
.gradients {
background-image: url('left.jpg'), url('right.jpg');
background-position: top left, top right;
background-repeat: repeat-y;
bottom: 0;
left: 0;
opacity: .5;
position: absolute;
top: 0;
right: 0;
}
Codepen Link, with CSS gradients because I don't have your JPG assets but the effect is the same.
I can think of a couple of ways:
You should put them in separate divs and place these divs underneath the main container / wrapper. You can css-position them accordingly.
You could work with actual .png images that allow for a transparency gradient
You could work with a background image that already has both the gradients and the desired bg-color in one file. Then you could make it background-repeat: repeat-y; and background-size: contain.
So i have this image right here
"http://i.imgur.com/eh71foN.png"
My problem is that whenever i resize the window the Mass Effect image doesnt resize with it.
It becomes like this
"http://i.imgur.com/jaDV7jG.png"
I've been trying to figure this out for a while. Can anyone point me in the right direction?
#MassEffectSign {
background: url(masseffect12.png) center top no-repeat;
top: 25px; left: 750px; z-index: 2;
padding: 250px;
position: absolute;
}
My blue background
#bodyBorder {
background: url(navyblue.jpg) center top repeat-y;
padding: 1000px;
opacity: 0.7;
background-attachment: fixed; }
Use img tag instead background image in CSS.
img {width: 100%}
Use percents for the relevent values.
top: 25px; left: 45%;
This makes the amount of space between the left edge and the image relative to the window size. Play around with the value a little to center it and you should be good.
Your positioning is absolute, so it will move independently of the scale. Put that inside a relatively positioned div and then it will work.
For instance,
<div style="position:relative;">
<div id="MassEffectSign"> </div>
</div>
Hope this helps.
Working Demo: http://jsbin.com/opokev/54
I'm working on having this image as the background image and also have a header as well, however, as the demo shows my header is cutting onto the image.
How can I correct this so that first the header draws and then the background body image draws. I still want to maintain the quality of the image as is without scaling it.
Here you go http://jsbin.com/opokev/64/
just changed top: 0 to top: 85px and it works.
Try using background-position.
background-position: 0px 85px;
Could do the trick :)
Or you could try just using this:
#background img {
width: 100%;
height: 100%;
position: absolute;
top: 85px;
left: 0;
z-index: -1;
}
I can't see any difference in these to backgrounds (thinking about scaling):
http://jsbin.com/opokev/54
http://jsbin.com/ijoyiy/2
Then again, I'm 2min away from sleeping and I haven't got my glasses on ;)
Remove the img tag and use background-image for the div#background. Then, set background-position to center 85px.
Combined CSS:
div#background
{
background:url('http://i52.tinypic.com/33xd1yu.jpg') no-repeat center 85px;
width:100%;
height:100%;
}
This will shift the background image down 85px.