I have to set some hotspots over a reponsive image.
The indispensable requirement is that after a certain height the background image
will be "cropped" on top (using: background-position: 0 bottom).
In this example hotspots are ok until the image width is less than window width.
How can I preserve the correct positioning?
CodePen
Related
I'm developing a wordpress theme and I'm having a bit of a problem.
In my homepage I want a wide background image with some text centered on it. So far pretty standard.
The thing is, I want the height to stay the same and as the browser gets smaller, the image should crop from both sides accordingly so the image stay centered.
Here is a great example I found, try resizing it and look at the big image at the top:
http://www.shopstyle.com/
How can I get this effect?
Thanks in advance! :)
You can use property background-size with value cover, which was made for that purpose
cover
A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.
set the height you need (you can set different height for FHD, HD, Tablet, Mobile with media queries) and the image will be cropped from sides and zoomed if needed (if it's shorter than height you set)
Additionally to using background-size: cover;
You should use view port height to control the height of the image. This way it will always be a certain percentage of the view port height, no matter if it's a desktop, laptop, phone, etc. It's the more fluid way to display a height.
Example (covers the whole screen):
.yourelement {
height: 100vh;
}
Example (covers half the screen):
.yourelement {
height: 50vh;
}
Adjust accordingly.
We have been provided a 1500px wide image that is a mockup of a website.
The website design is a fixed width design, where the design takes up the middle 990px of the image. So the 255px on either side of the image is just overhang to show how the site would expand to bigger viewports (ie, it wouldn't aside from some edge elements expanding to infinity).
What I would like to do is simulate this with the image (up as far as it will go). So if the viewport is 1500px, the image would start at 0,0.
If the viewport was 990px or less the image would start at 0,255px.
Anything in between would scale. So I would like to scale a negative margin from -255 to 0 depending on the width of the viewport.
Kind of like the opposite of
margin: 0 -10% 0 0;
This goes in the opposite direction to what I am thinking - as the viewport gets wider, the image migrates to the left instead of to the right.
In your stylesheet you could try using some responsive design techniques,..
#media screen and (max-width:1500px){
#yourContainer{margin-left:0;background-color:#afa;}
}
#media screen and (max-width:990px){
#yourContainer{margin-left:255px;background-color:#aaf;}
}
background color added for testing only ;)
This jsFiddle demonstrates this, just resize the browser window or the fiddle column width - http://jsfiddle.net/vs6uz/1/
I'm trying to take an image and center it on the screen. Lets say the image is the full width of your screen, say 1400px ---
When you resize the browser window, I'm trying to get the image to crop but stay centered as the browser window gets smaller.
Is this possible with css?
I tried a few things with overflow:hidden - no success.
I would take a look at background-size and then just center it vertically and horizontally.
http://css-tricks.com/perfect-full-page-background-image/
I have an image that I want to use as a background-image for my footer. Its sort of a gradient image, so the will be white, and the image will fade from its color, to white. It's not really a repeatable image though.
If I want it to always span the entire width of the page, is this possible without a background-repeat? Or, because of different monitor sizes, will this be impossible?
The background image I want should only be in the footer of the page. Like a sticky-footer, it should always stick to the bottom and the content will push it down as needed. It's about 400px in height.
It could still be a background (positioned bottom-center) but it can;t take up the whole height, just the width. And it need to be able to be pushed down (not fixed)
If you're comfortable using CSS3 you can use
background: #fff url(image.jpg) center center fixed no-repeat;
background-size:cover;
to have the image cover the screen. You'll want to be careful that it is at least a decent resolution though.
I want to build a fixed width website which is 960px wide and aligned to the left. However, I want to use a background which is wider than 960px and that fills the space to the right if the user has a screen wider than 960px.
This is easy using a background image:
body {background:url(myreallywidebgimage.png) 0 0 no-repeat}
#wrapper {width:960px;}
But can I do it where the background is an SVG, without a horizontal scroll bar appearing?
The only thing I can think of that would turn off the horizontal scrollbar is to do something like as follows:
#wrapper {width:960px; overflow-x:hidden}
Edit: Upon further reflection I decided it was best to see if Google offered up an other possible suggestions and I came across this: http://helephant.com/2009/08/svg-images-as-css-backgrounds/. The above solution will only work if you assign the background to that div element. You can, however try assigning overflow-x:hidden to the body itself to see if that solves the problem as well. Hopefully these suggestions help.
The background will scroll only if your SVG image has pixel dimensions which exceeds that of the browser window. If you set the image to have 100% width and 100% height, the background should not scroll.
Take a look at this web site. They're essentially doing what you want. They have an SVG gradient as the background. As you resize the browser, the gradient adjusts to fill the entire window.
http://emacsformacosx.com/
They also have a lot of other SVG on the page, but the background gradient is all you need.