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.
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.
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 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.
I'm trying to make a page that can scale down to support small browsers, but take advantage of the majority of browser sizes that most visitors are using.
I have a background image that is bigger than 1024x728, but the most important parts of the image are contained within 1024x728... It's like a magazine's bleed - there's extra image there if its needed (and it looks better if fully expanded) but it's not necessary.
I have included an example to illustrate what I mean:
http://tinypic.com/r/24l5she/7
The "background image" is the entire red box in the larger browser window, and there's a repeating texture it sits within (the blue). The "white box with red arrows" is the "minimum size" I want to accept. What I am trying to do, depending on the size of the user's browser, is cut out parts of the image until the browser reaches some specific minimum size.
Can this be done within a framework like 960.gs?
Really looking forward to your responses!
Cheers,
Put your page in a fixed-width wrapper div, then add a centered background-image to the body tag.
With CSS3's background-size property, you can force the image to stay a constant size. Then it's just a matter of a no-repeat center center bit in your background declaration.
div {
background: url('yourpic.jpg') no-repeat center center;
background-size: 1024px 768px
}
You didn't really want to support IE<=8, did you?
Not an answer but more of a food for thought...
Seeing as your background image is so large, you may want to just remove it from mobile devices. While most of them can handle it, it's just extra data that needs to be transferred and most mobile carriers have strict data limits.
Like I said, just something to consider. :)