I have a container with a background image. This container is a variable height, depending on the content inside it. As the container gets smaller, I would like to progressively cut off the bottom of the background image, while still keeping it in the same place.
I have played around with background-size and background-position but I haven’t been able to achieve this. Any advice?
Basically I would like to do this: http://jsfiddle.net/tdgbu6kv/2/
.one {
height: 500px;
}
.two {
height: 100px;
}
.image {
border: 1px solid red;
background-position: right bottom;
background-size: 50%;
background-repeat: no-repeat;
background-image: url(https://source.unsplash.com/random/800x600)
}
but instead of it cutting off the top of the image, I would like it to cut off the bottom
Related
I have website where there is a header background-image that is styled with the following CSS:
.header {
position: relative;
min-height: 436px;
background: url("../img/holland-canal.jpg") no-repeat;
background-size: cover;
}
As it is now, when resizing the window on lower resolutions, the image is aligned to the left and thus the right part of the picture gets cut off. The right side of the picture contains the bridge, which I want to be visible at all times.
Is it possible to position the background-image in such a way that it is always aligned to the right, i.e. that the left part of the image is cut off when resizing to a smaller window?
Add this to your CSS:
.header{
background-position:right;
}
as the div that have the header class is containing the background image
Output
Fore more info, check this
Add background-position
.header {
position: relative;
min-height: 436px;
background: url("../img/holland-canal.jpg") no-repeat;
background-size: cover;
background-position: right;
}
I have the below code and I'm trying to add an attribute to center the background but it's not working.
Existing Code:
<div class="av-section-color-overlay" style="opacity: 1; background-color: #000000; background-image: url(http://andytraph.com/wp-content/uploads/2015/08/avatar.jpg); background-repeat: repeat;"></div>
Existing CSS:
opacity: 1;
background-color: #000;
background-image: url("http://andytraph.com/wp-content/uploads/2015/08/avatar.jpg");
background-repeat: repeat;
}
The CSS I tried to add is:
.av-section-color-overlay {
background-position: center center !important;
}
The website is http://andytraph.com/ and I'm trying to center the full-screen Avatar image
I would suggest not repeating the background, but letter-boxing it in the container, which looks way better. Center works:
{
opacity: 1;
background-color: #000000;
background-image: url(http://andytraph.com/wp-content/uploads/2015/08/avatar.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
There are a few competing problems here:
There is no content inside the element you are working with, so the background image is getting clipped as a result.
The background image is very large, so it is difficult to see the desired centering without either 1) setting the DIV element to a relatively larger height / width, or setting the background-size CSS property.
The concepts of background-repeat: repeat and background-position: center constitute competing desires. You can't really both center an image, and tile it indefinitely in both directions.
So in light of the above, if you apply a few further style modifications, you get your desired behavior with what you specified: background-position: center. (If you want to center in both directions, you don't need to expressly state it twice -- it is implied that you want to use it in both directions if there is only a single value.)
Something like:
.av-section-color-overlay {
background-color: #000;
background-image: url("http://andytraph.com/wp-content/uploads/2015/08/avatar.jpg");
background-repeat: no-repeat;
background-size: 100px;
background-position: center;
height: 200px;
width: 200px;
}
and:
<div class="av-section-color-overlay"></div>
Example: https://jsfiddle.net/7mpqfd22/2/
I'm trying to center an image inside a div, it gets close, but still is not really centered. The image is 976x976 px. The following is the CSS:
div {
margin-left: auto ;
margin-right: auto ;
border:1px solid #ccc;
max-width:976px;
height:976px;
min-width: 433px;
padding:0;
background: url("images/background.png") center center no-repeat;
}
The image must to be centered, but its exorbitant at the top and right, that is:
Looking at your provided URL I saw that positioning the background-image is indeed positioned more towards the top due to the fact the bgimage is larger than the div itself. Therefore you need to play with the percentages.
background: url("images/background.png") no-repeat 50% 18.5%;
Could solve your problem and place the image in the center of you div
Seems to be working fine??
Ive changed the order of your shorthand css and used 50% instead of center.
div {
position: absolute;
width: 100%;
height: 100%;
}
div {
margin-left: auto ;
margin-right: auto ;
border:11px solid red;
max-width:976px;
height:976px;
min-width: 433px;
padding:0;
background: url("http://lorempixel.com/output/fashion-q-c-976-976-4.jpg") no-repeat 50% 50%;
}
<div></div>
Your image on your link is a rectangular image with the circle at the top so isn't square.
Crop that image for your code to work!
The Fiddle isnt rendering the exact grid properly but it gives you an idea of what I'm going for. Each div has a fixed background image. The problem is each background image is defaulting to the top left corner, even after trying to reposition the image using background-position.
https://jsfiddle.net/hLu7gvo3/
The styling looks like this
#thumb1{
background-size: cover;
background-position: center;
background: url("../img/gal1.png");
background-attachment: fixed;
background-repeat: no-repeat;
}
.gallerythumb {
color: white;
position: static;
float: left;
width: 33.333vw;
height: 100vh;
}
and the html as you'd imagine
<div class="gallerythumb" id="thumb2">1</div>
I tried setting the sizing property as container but that didn't do much. Anyone have any clue how to center the background image within the 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