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;
}
Related
As the title says, the issue arises only when viewed on mobile.
On my pc it looks exactly as desired but when I open it up on a mobile device there is a blank space between the background image and the footer?
Site is live #
https://claritysalonspa.com
Any help would be appreciated!
I am not sure how you are adding the background image in the backend, but try adding the following style. In here, .page-id-29 is the class added to the current page, and you added a background image to it.
.page-id-29 {
background-image: url(YOUR-IMAGE);
background-size: cover;
background-repeat: no-repeat;
height: 100vh; // add the height
background-position: 50% 50%; // center the image
}
so the solution is to add height: 100vh and also change the image position so it is centered.
Add this in your style.css
#media screen and (max-width:600px){
.page-id-29{height: 95vh;}
}
It's because your bodydoesn't have enough content. If you add more content then there is no trick needed.
You can overcome this by adding min-height to your body tag.
.page-id-29 {
background-image: url(https://claritysalonspa.com/wp-content/uploads/2018/03/IMG_5215.jpg);
background-size: cover;
background-repeat: no-repeat;
min-height: 92vh; /* this for height */
background-position: center center; /* to center the image */
}
If you want to make your footer always bottom of the viewport please add thi also.
footer {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
padding: 0 !important;
}
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 currently building a single page scrolling website.
On the second page I'm using a background with the background-size:cover attribute. Basically I want an element to sit on top of the background but move in correspondence with the background on resize, even if that means the element moves out of the viewport.
Is this possible?
What I've tried so far:
.background {
width:100%;
height:100vh;
margin:0;
background-image: url('Studio.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: 80% 0%;
overflow: hidden;
position: relative;
z-index: 1;
}
#image {
height: 100%;
width:100%;
background-image: url('lamp.png');
background-repeat: no-repeat;
background-size: auto;
position: absolute;
}
I've mocked up a diagram to better explain what I'm trying to achieve:
The first diagram shows how the layout looks in a full size viewport.
The second diagram shows how I want the layout to look when the viewport is resized... so the image element moves in relation to the background, out of the view port.
Link to first diagram
Link to second diagram
Sounds like parallax scrolling or position:fixed on your element.
Using web responsive design I want to put a big image as background on the frontpage, which always stays 100% width and height. Very similar to https://ghost.org
Here is how I'm trying to do it:
http://jsfiddle.net/Jp5AQ/1144/
div img {
max-width: 100%;
min-height: 100%;
height: auto;
outline: solid 1px red;
}
But it doesn't work correctly. The image is disturbed by resizing the window.
If you want to do this with pure CSS you can use the CSS3 background-size property:
div {
width: 100%;
height: 100%;
background: url(your-image.jpg) no-repeat center center;
background-size: cover;
}
Here is a fiddle demonstration:
http://jsfiddle.net/Jp5AQ/1149/
This is the same technique used on the Ghost site you gave as a reference.
Note that I've given the html and body elements height:100% so that the div stretches to fill the height of the viewport.
You are using <img /> tag.
Call the image through CSS and use background-size: cover;.
Here is the DEMO
Your image will always be the max-width of the browser window; however, the height will not stay at 100% of the browser window because the image on the screen needs to stay in proportion with the original image. As the width of the browser window shrinks, so will the height.Otherwise your image would be skewed.
You can use the property background: cover.
The post maybe be helpful http://css-tricks.com/perfect-full-page-background-image/.
Its hard to do that with an img tag.
it will work a lot better with:
background-size: cover;
background-position: center;
here is a Fiddle of it
just remove the image inserted with an image tag and instead put the image in a div as background.
div: should get height and width of window screen size (most likely with javascript)
insert image with the css style:
div{
background: url(path_to_img/img.jpeg) center center no-repeat;
background-size: contain; // you also can use cover, just look how you wish the picture should be cut or not. for background-size you also need some prefix for some browsers
}
here is the link for css background: http://www.w3schools.com/cssref/css3_pr_background.asp
and here is the link for background-size : http://www.w3schools.com/cssref/css3_pr_background-size.asp
try this css:
.banner-bg {
background-image: url(../images/header-bannerbg.png);
background-position: fixed;
background-repeat: no-repeat;
height: 580px;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}
http://jsfiddle.net/aashi/Jp5AQ/1146/
I have a Joomla site that i have created a custom theme. The site is http://esn.teipir.gr/.
I have two images right and left that i want them to have background image fixed.
I use the following CSS rules
div.backgroundboxleft {
background-attachment: fixed;
background-image: url("/images/back_1.png");
float: left;
height: 822px;
top: 40px;
width: 457px;
}
and
div.backgroundboxright {
background-attachment: fixed;
background-image: url("/images/back_2.png");
float: right;
height: 822px;
top: 40px;
width: 457px;
}
If i remove the background-attachment all is OK with the images but when i add with firebug the following code everything messes up.Can you help me making the pages stay fixed without the background color being on top of the image?
Thanks
When you set background-attachment:fixed it fixes the background in relation to the window. So you would then need to adjust the background-position of your images so they appear in the right place. If you replace your backgroundproperties with the css below it will line up properly.
div.backgroundboxleft {
background-image: url("/images/back_1.png");
background-attachment: fixed;
background-position: 0 44px;
background-repeat: no-repeat;
}
div.backgroundboxright {
background-image: url("/images/back_2.png");
background-attachment: fixed;
background-position: 1323px 44px;
background-repeat: no-repeat;
}
Live example: http://jsfiddle.net/tw16/6fZ96/embedded/result/
To clarify background-attachment:fixed stops the background from scrolling with the window. So if your viewport is too small and you have to scroll horizontally or vertically the background will not move (i.e. it will be overlapped). More information can be found here.