I'm creating a landingpage at the moment and a key feature is that is has to be a responsive one. I have a little bit experience with responsive web design but I'm stuck at the moment.
The max width has to be 1280 pixels. So when its on a desktop it has to be 1280px wide and aligned to the center. So scaling grom 1920x to 1280px is fine. But when it comes lower than 1280px I want to let the site scale the content. But since I've put the 1280px as a static width I don't know how I can make this responsive and let it scale with it lower than 1280px
I hope I've explained it good enough. English grammar is terrible sorry.
This is a piece of the code of how my body and container is
body
width: 100%
background: -webkit-linear-gradient(#de0b1d, #8a0712) /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#de0b1d, #8a0712) /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#de0b1d, #8a0712) /* For Firefox 3.6 to 15 */
background: linear-gradient(#de0b1d, #8a0712) /* Standard syntax (must be last) */
.container
padding: 0
position: relative
width: 1280px
height: 100%
background-image: url("../img/head-image.png")
background-repeat: no-repeat
background-position-y: 150px
I think it's because it a static value but how can I make this a responsive one with a max width of 1280 px?
The background image should also scale with the max width of the screen. So I think I have to use Background-size: cover for that, right?
Thanks in regard!
use CSS media queries to trigger styles when you reach a certain screen width. http://css-tricks.com/css-media-queries/
Related
There are two circles in the background, one at top-left and one at bottom-right.
For desktop it's ok but for mobile, it is supposed to be as is in the design.
I can't understand how to solve this issue. Can u pls help with this?
Given design:
What I made:
background circles are not in the right position
Github - github
body {
background: url('images/bg-pattern-top.svg'), url('images/bg-pattern-bottom.svg'), #19a2ae;
background-position: -80% 50%, 170% -40%;
background-repeat: no-repeat, no-repeat;
background-size: 70%, 70%;
display: flex;
justify-content: center;
align-items: center;
}
Maybe what you should use is viewport width (vw) and viewport height (vh) for dimensions and position of your circles.
When width > height (large screens like desktop), you should use vw, and when height > width (smaller and vertical screens like mobile), you should use vh. Obviously you'll have a larger number of breakpoints than 2, but this example could help you:
https://codepen.io/tpmarc/pen/PojGbwx
I have a website on github pages, which works perfectly on any desktop browser. However, two of my background images will not show up on mobile devices (I've only tested iPad and iPhone, it could just be IOS). I have tried adding media queries to make sure the background-attachment property is set to scroll on handheld devices (I had read this was sometimes the problem). I also have media queries that ensure the images are not too large to load. Here is my html:
<div id="image-1" class="background-image"></div>
<div id="image-2" class="background-image"></div>
Here's the css:
#image-1 {
background-image: url('imgs/coding.jpg');
}
#image-2 {
background-image: url("imgs/game.JPG");
}
#media only screen and (min-width: 500px) {
/* For mobile phones: */
#image-1 {
background-image: url("imgs/coding-large.jpg");
}
#image-2 {
background-image: url("imgs/game-large.jpg");
}
}
#media not handheld {
.background-image {
background-attachment: fixed;
}
}
.background-image {
opacity: 0.8;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: 100% 100vh;
height: 85vh;
}
If I change 100vh to 100%, then the images load, but they are terribly stretched vertically. Any suggestions?
You can either:
use a fixed position, with a background position center center: see "CSS background-size: cover replacement for Mobile Safari".
This page refers to a background-attachment: fixed; as well, while remining use that viewport values (such as vh and vw) are technically supported on iOS 7 but simply do not work, hence the rodneyrehm/viewport-units-buggyfill project.
or (less elegant), use fixed size for media with a given size: see "Background image not displayed properly on iPad and iPhone"
Seems iPhones disregard #media rules for handheld devices (See here Do iPhone / Android browsers support CSS #media handheld?
). And giving background-size property of 100% 100% will make the image stretched if the image is not square.
So you can use max-width media query to detect mobile devices and set background-attachment as scroll. And either use background-size: cover or background-size: 100% auto
It looks like you have competing heights with your background-size attribute and your background height attribute. Check out CSS-Trick's post on background-sizes for a better implementation. Since it looks like you want to cover the width of the page with the images, go with background-size:cover instead. Hope this helps.
Use this
/* Image is centered vertically and horizontally at all times */
background-position: center center;
/* Image doesn't repeat */
background-repeat: no-repeat;
/* Makes the image fixed in the viewport so that it doesn't move when
the content height is greater than the image height */
background-attachment: fixed;
/* This is what makes the background image rescale based on its container's size */
background-size: cover;
I have developed a small website - luxorclub.ru/en. In "Menu" section there's bottles image which is supposed to be 100% with repeat-x. It looks good on desktop but it's not 100% on a smartphone.
This is how it looks on a desktop
And this is how it looks on Galaxy S6
CSS:
#outer-menu-food {
width: 100%;
height: 700px;
background: url('images/menu/menu-bg3.png') repeat-x;
background-position: center;
}
This is because the #outer-menu-food take the width of the viewport and background will stretch only to that point. You might have to restructure everything for your website to display properly on mobile. Like after a particular resolution remove the fixed values you give as width and stuff and consider giving it percentage values.
In short write media queries to get things fixed on mobile device.
I have a rendering error in this website which I haven't seen anywhere else. The website renders in all modern browsers and validates fine although I can't figure out why is it not displaying the full background image (see screenshots below). I am using Yahoo CSS Reset and the background image is declared in the body like this:
background: url("back.jpg") #033049;
You can also visit the website: http://xaviesteve.com/
Let me know if I should provide any more details.
Any help/hint is appreciated, thank you.
EDIT
I have found very few people reporting this issue around the Internet:
Another SO question: White space showing up on right side of page when background image should extend full length of page Suggested applying overflow-x:hidden but it crops the website.
In an iPad forum: http://www.ipadforums.net/ipad-development/9954-mobile-safari-doenst-show-background-image-when-page-slided-left.html No replies
SOLUTION
I've been investigating and trying different ways to solve this and found that adding the background image to the <html> tag fixed the problem. Hope this saves some time to other devs.
Before
body {background:url('images/back.jpg');}
After
html, body {background:url('images/back.jpg');}
Moving the styling to the html element works fine, but there are other ways of fixing this.
What's going on here is initially the body element is sized according to the viewport. If the viewport is only X pixels wide, your body will only be X pixels wide, even if the contained content is wider. To fix this, give your body (or whatever you're attaching the background stylings to) a non-percentage based width or a min-width to fit your content.
You actually get the same issue on desktop browsers by narrowing the browser window and scrolling to right. The problem is more noticeable on the iPhone/iPad because by default, Mobile Safari will set the viewport to 980px, and then zoom out until all your content fits on screen.
An alternate solution, which I wouldn't recommend because it only works for Mobile Safari is setting the viewport width yourself using:
<meta name = "viewport" content = "width = 1080">
More info at Apple's Developer Docs.
Just ran into this problem and fixed it by setting all content that uses width:100%; to also have min-width set larger than the width of your content divs.
FOr example:
.content_bg{width:100%; min-width:1080px;}
I also fixed it on mobile devices using media queries:
for iPhone and iPad:
/*ipad portrait*/
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
body{width:1080px;}
}
/*ipad landscape*/
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
body{width:1080px;}
}
/* iPhone [portrait + landscape] */
#media only screen and (max-device-width: 480px) {
body{width:1080px;}
}
None of those solutions solved my problem, but I found out a rather simple one.
Just set the background-size of your bg container equivalent to the image dimensions, like this:
body {
background-image: url(bg.jpg); /* image dimensions: 1920 x 3840 */
background-size: 1920px 3840px;
}
Although it may seem a bit redundant and not nearly as good as making your site responsive, it works fine.
Set background-size to 100% and background-position to top-left. It will works fine as follows:
background-color: #336699;
background-image: url('whatever.jpg');
background-repeat: no-repeat;
background-position: top left;
background-attachment: fixed;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;`enter code here`
I know this is already answered some time ago, but none of the fixes I could find worked for me, but I managed my own solution which should work for most people I imagine.
Here's my code:
html {
background: url("../images/blahblah.jpg") repeat-y;
min-width: 100%;
background-size: contain;
}
Hopefully it helps someone!
Hey all! I'm in the process of setting up my website and I'm trying to find a way to have my background image (or any image) to re-size it self according to content.
My background consist of 4 corners, 4 edges and a fill for the middle. Is it possible to have it re-size? Example of how i want to use it:
My background image currently supports about 4 paragraphs and im at the bottom. What if i want 7-8 paragraphs? Will i have to manually remake the image to be longer or can i have it take the left edge, right edge, bottom corners and bottom edge pictures and and it down? I really hope that made sense haha.
I don't want to stretch the image because it loses its resolution and looks terrible.
Thanks for your time.
No.
Make the corners and edges separate images. Top/bottom edges should be tileable horizontally; left/right edges vertically.
Then have a "middle" image as your background that either tiles or is scaled in some other way. This answer may help you there.
You can do this using css3 properties. Not all browsers support this yet!
.foo {
background-image: url(bg-image.png);
-moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100% 100%; /* Opera 9.5 */
-webkit-background-size: 100% 100%; /* Safari 3.0, Chrome */
background-size: 100% 100%; /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
-moz-border-image: url(bg-image.png) 0; /* Gecko 1.9.1 (Firefox 3.5) */
}
https://developer.mozilla.org/en/CSS/-moz-background-size