I have a large background image (3600x1600) for my website which I want to use at this resolution to cover pretty much all screens up to 2k.
However, my dilemma is that this image includes sky in it and the top 1000 or so pixels are literally just sky, meaning that at 1080p, all you can really see is the sky in the image, due to the fact that the browser will start the image at the top of the page and expand down as your resolution gets larger.
I need the background-image to stick to the bottom of the page and expand upwards as opposed to downwards, so all resolutions can see the city in the image and then the sky covers larger resolutions.
I've tried a few different things, scaling background to 100% using CSS3, which due to the aspect ratio of the picture leaves a white gap at the bottom of the page at 16:9 and the position "bottom" tag, just puts the bottom of the image at the top of the page which is ridiculous...
Any ideas of how to do this or if it is possible at all? Thanks.
Related
For example, if I have a background image of a cyclone and it's responsive/resizes with the window and covers the whole web page (background-size: cover), but the eye of the cyclone isn't in the center of the webpage but say slightly more to the right and I wanted another image, say a picture of an apple, to always cover the eye of the cyclone, no matter what size the window is, what could I do?
I've tried playing around with the margin percentages, the image of the apple is also responsive and shrinks with the background image to cover the eye of the cyclone but the images always tend to move out of sync just before I've dragged the window to it's smallest size.
The CSS background size property can have value of cover. The cover value tells the browser to automatically and proportionally scale the background images width and height so that they are always equal to or greater than the viewports
width/height.
In Img tag use height i and width in pixel then change in CSS
then output will show properly
Check the Multiple Backgrounds CSS feature which will achieve your request: https://www.w3schools.com/Css/css3_backgrounds.asp
I would like to find out how to present a banner or logo on a responsive design but I can't find a question that is not flagged as bad or likely to be closed. I've tried numerous ways of phrasing the question and none of them are liked. So, I have no idea how to even present this question or even where to begin to look for the answer or how to ask the question. PLEASE, PLEASE give me an idea of how to word this so someone will see my question. I've tried web searches but nothing addresses the issue and I cannot even figure out how to work it.
In case someone sees this, what I am doing is taking a site that was not responsive and had a banner that was 1100 px wide by 110px in height. The trend seems to be to move away from such banners and use logos that are square or round instead or to use text for branding. If I just reduced the size of the banner to 500px wide then the height would proportionally decrease to only 40 or 50px if a percent value was used. That clearly won't look good on a small screen.
Also, if I reduced the image to a more square dimension the image isn't actually resizing by percent values when the CSS background-image style is used instead of an img tag surrounded by div tags. I haven't found a way to control alignment and size using percent values on the background-image property of a container. I could tell my client that we shouldn't use a wide banner in a responsive design but I don't know if that means I am missing an option.
A different image seems to be required on smaller displays using media queries. Can alignment and resizing as percent values be used with the background image CSS style or should different images be served using the img tag?
Lastly, on a high pixel density display tablet or even smartphone serve a large image due to the number of pixels wide being greater than 900px or 1000px? With high-density displays, it seems that even a smartphone could have a width greater than 1000px but that may not look right.
this will size it:
.img-class {
background-image: url('path/myImage.png');
background-size: 200px 200px;
}
first value is width, second value is height, you can also use %, or to scale the whole thing use a single value like for example: background-size: 80%;
A different image seems to be required on smaller displays using media
queries. Can alignment and resizing as percent values be used with the
background image CSS style or should different images be served using
the img tag?
Yes as long as you scale it down and not up, or it blurs out.
Lastly, on a high pixel density display tablet or even smartphone
serve a large image due to the number of pixels wide being greater
than 900px or 1000px? With high-density displays, it seems that even a
smartphone could have a width greater than 1000px but that may not
look right.
Just be sure your images are 'retina ready' and that's all, meaning if you want to place on your website a 200x200 px image, create it 400x400 px instead, then using css you force it to always be 200x200, so it will read a 400x400 and resize it to 200x200 making it not blurred on mobile.
Side note: If you have graphic images and not photographs, i recommend you using svg (vector images) now supported on all browsers, that are scalable so retina ready by default let's say, and way smaller in size.
Probably a basic question, but i'm trying to offset a background cover image to the right at a certain media query. However I added that to the css and when it reaches the media queries it works, but if i scale a certain way there is white space. I would like to maintain the cover image properties where no matter how you rescale there is no white space. Currently I have a cropped image to load on the media query so this doesn't happen, but i'd rather just have one image that loads because there is not much difference in file size.
So I have a horizontal banner that I defined via a div. This div has a width of the full window and fix height of 500px for the time being. How can I scale an background image (2048 x 1283) to fill the div entirely without loss of picture quality? How would I do the same if the div height was relative to the window size, perhaps 25% or 50%? I want this to work when the window is resized.
Well you will never loss picture quality because you are keeping rendering the same picture over different sizes. You have to understand that responsive background its a hard topic since the picture will never display exactly how you want to, since different devices will have different display resolution, as example if you are seeing the same responsive image in your iphone portrait format (vertically) will look smaller in height than if you see in the same device but in landscape format (horizontal).
Any way heres is a question that can help you in your journey of responsive backgrounds Responsive css background images
cheers.
--- EDIT
if you want to achieve a full background http://css-tricks.com/perfect-full-page-background-image/ see this information.
I have a problem with my website.
When I resize the browser window or access the site from a device with a small screen, a white transparent box appears from the bottom of the page and grows bigger as I resize the window.
I have no idea where it comes from and can't find the issue in my code.
To see what I am referring to, try scrolling down to the bottom of this page: [redacted] and make the window smaller.
That looks like your full screen image shrinks too small as the page resizes. And when you resize, the solid background color becomes visible, appearing as like a box.
So you might need to use an approach that stops shrinking that background image when it gets to a certain point so as not to be smaller than the window-height.