I would like to get the effect shown here:
http://jsfiddle.net/abalter/k8G3C/
The background image is transparent. The logo and text overlay.
The problem is, I want the background image to repeat-y. It's fine with a wide viewport, but when the viewport narrows, the text passes the bottom of the image.
If I do:
body {
background: url(...);
opacity: 0.6;
background-repeat: repeat-y;
}
then the background repeats in the y-direction, but all child elements become transparent as well. I have not found a way to make the image transparent without the child elements.
I'm formatting the background image such that it scales with the viewport, but is always centered -- the middle of the image is always in the middle. ("CSS-Only Technique #2")
Any suggestions?
appling opacity: 0.6; to body will make the whole page transparent. Change img to div like this :
HTML:
<div id="background-image"></div>
Css : now you need to set the size of the background-image to 100% on the x-achse and auto to the y-achse and ad a z-index:0;
#background-image {
background-image: url(http://www.arielbalter.com/BuzzJoy/img/green_and_roasted_half_and_half.jpg);
width: 100%;
top: 0;
left: 0;
height:100%;
opacity: 0.6;
position: fixed;
background-repeat: repeat-y;
background-size: 100% auto;
padding: 0;
margin: 0;
z-index:0;
}
Demo:http://jsfiddle.net/k8G3C/4/
Related
I need to place three different background images inside a div. At the top I want blue.png, then in the middle yellow.png (with repeat-y), and finally, red.png at the bottom.
So far, I have this Fiddle: http://jsfiddle.net/nwUPU/1437/. My problem is that yellow.png covers both blue.png and red.png. What am I doing wrong, please?
This example is used in responsive design. I do not know the width and height of the images.
.colors {
width:600px;
height:600px;
position: relative;
z-index: 2;
background: url("http://s9.postimg.org/47v6naitr/blue.png") center top no-repeat, url("http://s1.postimg.org/fgv3q86i7/red.png") center bottom no-repeat;
background-size: 100%;
}
.colors:before {
content: '';
position: absolute;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url("http://s24.postimg.org/hyhdhfg51/yellow.png") center top repeat-y;
background-size: 100%;
}
It is possible to add multiple backgrounds to the same element by providing them as coma separated values to the background property. Each background image that is provided will be added as a layer and will be stacked one on top of another (also depending on the background-position).
The key things to note here are:
When multiple backgrounds are applied to the same element, the first one is the top-most layer and the one provided last is the lower-most layer. Since we need the yellow to be sort of below the red and blue, it should be provided as the last value.
To position the blue and red images at their respective positions, background-position should be set appropriately. Since blue should be the first from top, it should be positioned at 0% 0% and since the red needs to be last from top, it should be positioned at 100% 100%.
.colors {
width: 600px;
height: 600px;
position: relative;
background: url("http://s9.postimg.org/47v6naitr/blue.png") center top no-repeat,
url("http://s1.postimg.org/fgv3q86i7/red.png") center bottom no-repeat,
url("http://s24.postimg.org/hyhdhfg51/yellow.png") center top repeat-y;
background-size: 100%;
background-position: 0% 0%, 100% 100%, 0% 0%;
}
<div class="colors"></div>
Possibly add three divs inside your first. each with their own .png?
<div>
<div id="blue" style="z-index: 1;"><img src="blue.png"></div>
<div id="yellow"style="z-index: 2;"><img src="yellow.png"></div>
<div id="red" style="z-index: 1;"><img src="red.png"></div>
</div>
I'm trying to set the size (both width and height) of a div to match it's background image size, but I can't get it working.
The background image size has to be in percentages, because I'm dealing with a responsive website. On smaller screens, the background should be displayed completely (with less width, but still proportional), and the div who has the image should follow that size.
I tried various values of the background-size, such as auto 100%, cover, contain, etc. but nothing did the trick.
There's a similar question here about this: scale div to background image size but it didn't solve my problem either.
I'd really appreciate if someone knows how to do it.
EDIT:
I made a fiddle to show the behavior: http://jsfiddle.net/osv1v9re/5/
This line is what is making the background image so small:
background-size: auto 100%;
But if it is removed is removed, the background will fill the proper width, but not the height.
tag cannot adapt to background-image size, you need to use an tag and choose between height: auto for the div or javascript
// **** Problem ****
// Wrong html :
<div class="my_class"><div>
// with css :
.my_class {
width: 100%;
height: 100%;
background-image: url(/images/my-image.jpg);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
}
//**** Solution ****
// use css:
.my_class {
width: 100%;
height: 100%;
background-image: url(/images/my-image.jpg);
background-size: contain;
}
*{
padding: 0;
margin: 0;
}
div{
width: 100%;
}
div figure{
padding-top: 36.56%; /* 702px/1920px = 0.3656 */
display: block;
background: url("https://st.fl.ru/images/landing/bg2.jpg") no-repeat center top;
background-size: cover;
}
<div>
<figure></figure>
</div>
you can have a responsive height using the padding-bottom or padding-top
because you can't fix an height property in '%' with a width in '%'.
div{
background-image: url(url);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
margin: 0 auto;
width: 100%;
padding-bottom: heightPicure / widthPicture + %; //do it manually or using scss rules
}
I have a div spanning the whole height of the viewport, while being horizontally center-aligned through use of margins, and would like to center a red square of, say, a 100px by 100px in that div just using CSS. Background-color: red wouldn't work, because that will span the whole div, which will be bigger than 100 pixels. I currently have the following solution:
div {
background-image: linear-gradient(to right, red, red);
background-size: 100px 100px;
background-repeat: no-repeat;
background-position: center;
}
It works, because there's no shift in gradient, but using linear-gradient in this way seems sort of hackish, which makes the solution less useable. Is there any way to generate a purely red square of some size smaller than the div without resorting editing the HTML of the page, or resizing the div with CSS? Preferably, I would also like to avoid scaling up an image of 1 red pixel (I wouldn't easily be able to change the colour).
Thanks for reading!
You could use the :after pseudo selector to add a block with these dimensions. If you position it absolute you can center it using left, top and a transform.
.box {
position: relative;
}
.box:after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
}
Or see http://codepen.io/ckuijjer/pen/CbduL
try this
html
<body>
<div id="div0">
<div id="div1"></hr>
</div>
</body>
css
#div1 {
width:100px;
height:100px;
background-color:red;
top: 50%;
transform: translateY(50%);
margin-right:auto;
margin-left:auto;
}
#div0{
height:500px;
width:100%;
background:white;
}
I'm sure this is correct behavior for the implementation I have, but I'm wondering if theres an easy way to do what I want to accomplish.
I have a background image that is a 3px x 3px pattern.
I want this pattern to repeat-x the full width (100%) of the element its set in, however I only want it to repeat-y for half of the width of the element its in (50%).
I have this implementation:
.element {
width: 100%;
background-image: url('/path/to/pattern.png');
background-repeat: repeat;
}
which successefully repeats the pattern throughout the entire element. To attempt to achieve the 50% repeat-y height, which is what I want, i tried:
.element {
width: 100%;
background-image: url('/path/to/pattern.png');
background-repeat: repeat;
background-size: 100% 50%;
}
However, the background-size skews the pattern image to 100%/50% height/width instead of keeping the desired repeat effect.
Is there any way to simply accomplish this?
Thanks
Make a graphic 3px wide and really tall with the different background below. Or, though more code, make a 'unit' of three divs: the base is a div with whatever other color/pattern you want that will be the 50% of the y. Next in that div is the background repeating to a fixed height and that one is positioned relative to the top of the base. The last div is just the content. Not as pretty as a simple CSS declaration, but it works across platforms and most browsers, even IE6.
How does your pattern look like? This may fulfill your requirements. Instead of using a background to display the PNG, you now use an img element, and set the width to 100% and the height to 50%. Or use a div to benefit from background:
<div id="element">
<div id="pattern"/>
<div>I'm at the top!<div>
</div>
The rules:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
#element {
position: relative;
min-height: 100%;
}
#element #pattern {
background: url(path/to/pattern.png);
height: 50%;
left: 0px;
position: absolute;
z-index: -1;
top: 0px;
width: 100%;
}
Add another container div
You can create another div inside the container div & set its width to 50% of parent container div. Inside this div, you can fill your pattern.
<div id="container">
<div id="myPattern"></div>
#container{
width:200px;
height:400px;
background-color:black;
}
#myPattern
{
background-color:yellow;
height:50%;
width:100%;
/* fill pattern here */
background-image: url(tt.png);
background-repeat: repeat-x repeat-y;
}
JSFiddle
If I want to have a blue bar in the background at the top of my webpage (so the body element's background), but I want it to be 100px in height and span the entire horizontal background... is there any way to do this without making a background image that is 100px with the color I want (and maybe 1px in width) and making it repeat-x?
Basically, rather than doing:
background: url("images/pagestripe.png") repeat-x;
I want to do this:
background: #FFCCFF 100px top left repeat-x;
Which would give me a 100px background of the color #FFCCFF that starts in the top left of the page and repeats horizontally.
Similarly, if I wanted it to repeat-y, it would make the 100px the width instead of the height.
The positioning markers can represent offsets...
Is this possible? Is there actual CSS code for what I am looking for? Perhaps I'm not far off...
You can do it using linear gradients:
body {
background-image: -moz-linear-gradient(top, blue 100px, transparent 0);
background-image: -o-linear-gradient(top, blue 100px, transparent 0);
background-image: -webkit-linear-gradient(top, blue 100px, transparent 0);
background-image: linear-gradient(top, blue 100px, transparent 0);
}
Edit: This is CSS3 only. For CSS2 you may try
body:before {
content: ' ';
display: block;
top: 0;
position: absolute;
height: 100px;
width: 100%;
background: blue;
}
You could make the bar a separate div and set a negative margin on it. Something like this:
<div id="bluebar"></div>
Content goes here...
And then in CSS:
div#bluebar {
background: #fcf; /* that's actually pink, but whatever... */
height: 100px;
margin-bottom: -100px;
}
I'd give a jsFiddle link, but they're apparently down for maintenance right now, so here's a simple static HTML demo instead.
Yes it can be done.
You can create a single full width element with the height and background color you desire.
Use CSS to position the element.
div#bluebar {
background: #acf;
display: block;
height:100px;
width:100%;
position: absolute;
top: 0px; /* however far from the top you would like it*/
left: 0px;
z-index: 10; /* or some other number that will place it below the appropriate elements */
}
Just be sure that the parent of #blubar does not have position:relative; set or it will position relative to the parent not the document.