Need some help with CSS background repeat. Below is the wire-frame for the functionality I am trying to achieve.
Current Code:
HTML:
<div class="wrapper">
<div class="container"></div>
</div>
CSS:
.container{
min-height: 10000px;
background-image: url(background1.png), url(background2.png);
background-repeat: no-repeat, repeat-y;
background-position: center top, center 1000px;
}
The current code displays background1 only one time and repeats background2 as I want,but the background2 image starts from the top of the page. I want it to start exactly after the background1 image ends as shown in the wireframe.
NOTE: Both the images background1 and background2 have transparent shapes in them which makes makes the other image visible in the background.
If you set a background to repeat, it can not be limited (AFAIK)
the solution would be to limit it to a pseudo element, and limit this pseudo element to where you want it (with the top property)
.test {
width: 300px;
height: 600px;
border: solid black 1px;
position: relative;
}
.test:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 200px;
background-image: url(http://placekitten.com/g/600/400);
background-repeat-y: repeat;
}
<div class="test"></div>
Note that the height of 100% is not accurate, if you want it to be accurate set it to your dimension
Related
I am trying to achieve this with css3, I tried using border-radius with percent values and it's not the same always, I always got a rounded corners and the border will start disappearing on the corners too.
I want it to be exactly the same as the example image:
EDIT:
this is my html code :
<div class='container-fluid'>
<section class='section-1'>
<div class='container'>
</div>
</section>
And this is my css:
.section-1 {
background-image: url('../images/bg.png');
background-size: cover;
background-repeat: no-repeat;
position: relative;
background-position: 50%;
}
If you want, you can accomplish this using only CSS by creating a <div> that would be used only as a mask. You can create the round effect with the border-radius property, but you need to do it bigger than the part that will be visible, then crop the result to show only the curvy part that you want. And you must compensate the imagem position.
Check my example below:
.oval-header {
width: 100%;
height: 150px;
overflow: hidden;
position: relative
}
.oval-header--mask {
width: 200%; /* Mask width 2x the size of the header */
height: 200%; /* Mask height 2x the size of the header */
transform: translate(-25%, -51%); /* This compensates the size of the image and places the curvy part that you want on the certer of the mask, it's a translate that negativates half it's width and half it's height */
border: 6px solid yellow;
border-radius: 0 0 50% 50%;
overflow: hidden;
border-top: 0;
background-image: url('http://www.placecage.com/3000/1500');
background-size: cover
}
<div class="oval-header">
<div class="oval-header--mask">
</div>
</div>
I want to use a background color, along with a transparent (or opaque) background image. Is this possible?
I've tried using div commands, but may be doing this wrong. The only opacity command I can see is in CSS, but how do you link this specifically to the background image, rather than just the body content?
Maybe this is what you are looking for (run snippet to see):
.stack{
height: 200px;
width: 200px;
background-color: #ddd;
position:relative;
}
.layer {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: url('http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png');
}
.base{
filter: opacity(.3);
-webkit-filter: opacity(.3);
}
.offset{
margin-top: 20px;
}
<div class="stack">
<div class="layer base">
</div>
<div class="layer offset">
</div>
</div>
I've added a margin to the top layer for you to see that there are two layer one (base) under the other. If you remove the margin you should see the tho images aligned perfectly.
I at least got the following to render the image, but when the window is resized past a certain point: part of the image gets cut off.
#header {
background-image: image-url('my_header.png'); #image-url is a helper in rails
background-repeat: no-repeat;
height: 100px;
background-size: 100%;
border-radius: 1em;
}
And then showing how I specify the image at the top of the body in application.html.erb:
<body>
<div id="header"></div>
</body>
What I want to happen is for the image to scale proportionality but not get cut off. I do not want any specific height set. I want it to automatically scale as needed (however, I wasn't able to get the image to render unless I specified the height with px).
#Pangloss deserves recognition for providing a fantastic answer at this jsfiddle which he referenced in the comments.
Here is his css:
#header {
background-image: url('http://i.imgur.com/zOZVQaf.jpg');
background-repeat: no-repeat;
background-size: contain;
border-radius: 1em;
border: 1px solid blue;
}
#header img {
display: block;
visibility: hidden; /*hidden but reserve the space*/
width: 100%;
height: auto;
}
And the html:
<div id="header">
<img src="http://i.imgur.com/zOZVQaf.jpg">
</div>
#Pangloss provided this answer in the comments. If/when he posts an answer to this question, I will switch it over to his answer.
I have this fiddle which generates single country flags from a image sprite. I want to squeeze each flag because the width of flag seems to be too wide.
JSFiddle Demo
For instance the Norwegian flag is too wide in the jsfiddle sample.
How can I do this? Thank you.
#flag1 {
width: 120px;
height: 60px;
background-image: url(http://i.hizliresim.com/e7Y5dm.png);
background-position: -120px 0;
}
#flag2 {
width: 120px;
height: 60px;
background-image: url(http://i.hizliresim.com/e7Y5dm.png);
background-position: -480px 13800px;
}
#flag3 {
width: 120px;
height: 60px;
background-image: url(http://i.hizliresim.com/e7Y5dm.png);
background-position: -1200px 19020px;
}
To get exactly what you wanted I used background-size just to reduce the width of your sprite.
So I reduced the width of the sprite about one sixth and adjusted the width of the element in accordance.
#flag3
{
width: 100px;
height: 60px;
background: url(http://i.hizliresim.com/e7Y5dm.png) 0 0 no-repeat;
background-position: -1000px -480px;
background-size: 1500px 780px;
}
Demo
One solution is to scale (transform:scale(x);) the whole element (the div in this case)
For example transform:scale(0.5); will scale the element to half its size, but keep in mind that it retains the initial space in the DOM flow.
Another way is to use the background-size property to resize your image, but you will have to recalculate the positioning as well..
demo at http://jsfiddle.net/JA97b/5/
Additionally, in your CSS you should group common properties to a single class and apply that instead of repeating tem for each flag..
.flag{
width: 120px;
height: 60px;
background-image: url(http://i.hizliresim.com/e7Y5dm.png);
}
#flag1{background-position: -120px 0;}
#flag2{background-position: -480px 13800px;}
#flag3{background-position: -1200px 19020px;}
and use
<div class="flag" id="flag1"></div>
<div class="flag" id="flag2"></div>
<div class="flag" id="flag3"></div>
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