My site looks fine when viewed on Desktop browser, but on mobile device the background image messes everything up and responsiveness is not achieved.
Site in question: http://www.victorfrolov.com
here's my code for the background image in body in css:
body {
/* Location of the image */
background-image: url('../img/image.jpg');
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
/* Set a background color that will be displayed
while the background image is loading */
background-color: #464646;
background-color:#FFF;
/*font-family: 'Roboto', sans-serif;*/
/*font-family: 'Open Sans', sans-serif;*/
font-family: 'Montserrat', sans-serif;
color:#3E404B;
}
This is what it looks like on a desktop (and shrinking/enlarging the page it works fine):
and here's on mobile:
and here is the parallax code, maybe this is the issue?
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 10px 5%;
}
.slide {
box-sizing: border-box;
height: auto;
min-height: 100%;
min-width: 100%;
background-size: cover;
box-shadow: inset 0 10px 10px rgba(0,0,0,.3);
}
Please help. Thanks!
#media screen
and (device-width: 320px)
and (device-height: 640px)
and (orientation: portrait) {
body { width: 100%; max-width: 100%; height: auto;
}
}
Or you may need to set a class for your img in your. html and use .test class with the same media query, then use same size, but set (orientation: landscape)
Related
I want to display two different background images per device, have a code, but it doesn't work properly...
where is a bug?
#media (max-width: 720px) {
body {
margin: 0;
background-color: #ff0000;
background-image: url('img/bg1.jpg');
background-repeat: no-repeat;
background-position: top left;
background-size: 100% auto;
}
}
#media (min-width: 721px) {
body {
margin: 0;
background-color: #303441;
background-image: url('img/bg2.jpg');
background-repeat: no-repeat;
background-position: top left;
background-size: 100% auto;
}
}
Check the path to your first image. My images work as it should.
And I agree with Dan Weber, the code can be simplified:
body {
margin: 0;
background-color: #ff0000;
background-image: url('http://glebkema.ru/images/2015_09_20_iphone_155_x400.jpg');
background-repeat: no-repeat;
background-position: top left;
background-size: 100% auto;
}
#media (min-width: 721px) {
body {
background-color: #303441;
background-image: url('http://glebkema.ru/images/2015_09_26_iphone_198_x400.jpg');
}
}
Just curious, why are you mixing min-width and max-width?
Usually, max-width is used when targeting desktop first and then working down to mobile.
min-width is used to target mobile first and work your way up to desktop.
http://www.the-haystack.com/2015/12/23/choosing-between-min-and-max-width/
I've changed the exact screen size a bit since 1px is harder to get difference on when resizing, but same concept. Run this in full page mode.
So, everything lower than 720 (mobile first) gets first image by default. When screen hits 720 it changes and then again at 820 and up.
body {
margin: 0;
background-image: url('http://www.dreamstime.com/static/free2/257779.jpg');
background-color: #FFF;
background-repeat: no-repeat;
background-position: top left;
background-size: 100% auto;
}
#media (min-width: 720px) {
body {
background-color: #ff0000;
background-image: url('http://pic.1fotonin.com//data/wallpapers/7/WDF_562760.jpg');
}
}
#media (min-width: 820px) {
body {
background-color: #303441;
background-image: url('http://images.all-free-download.com/images/wallpapers_large/old_farm_wallpaper_landscape_nature_wallpaper_1439.jpg');
}
}
Here is good youtube video explaing difference between min-width and max-width.
https://www.youtube.com/watch?v=Gi3INcPOvo8
I'm having trouble getting the background to display correctly on my landing page. On my desktop, it shows up fine, but on mobile, it appears to be centered in the middle vertically at the top of the page. I'm new to front-end and have been trying all sorts of hacks over the past 4 hours. Could somebody point me in the right direction?
I've set the image to scale to cover the entire screen. There shouldn't be any blank areas. I've tried using responsive modes on my desktop, and the Wright Glider mostly stayed in view as I resized, so the image should also center in the middle of the ... viewport?/window.
For the background, I have a normal sized image, and a cropped image I use for smaller devices
My site is at http://we-fly.ddns.net
Tested only with Chrome 49 on all devices, Android is v5.1
Responsive mode on the desktop doesn't seem to produce the same results.
Source: https://gist.github.com/yanalex981/992a60dd54be82162a45
Screenshots:
Desktop
Nexus 4
Galaxy Tab A 8
Also, if anybody has any suggestions, please share them with me
To fix the issue of your image getting cut off part way, you need to set your background position in your media query's to initial... So in each of your css Media query's paste the following code:
background-position: initial;
This will reset your background position to default when on mobile... from here you should be able to apply different styles to stretch/expand the image to your liking. :)
This is my second answer, I created this instead of adding it to my initial answer because the method is different.
In your HTML (index) file, add the image like this:
<img id="imgBackground" src="http://we-fly.ddns.net/images/back.jpg" />
(I suggest adding it directly after the body tag)
In your CSS, I am just going to post the entire thing, Its a little funny because your last #Media (Min-Width: 601px) is overriding your default for your desktop page... you may want to consider deleting this Media Query... See comments in code below to see changes:
/* Set initial values for your image background */
#imgBackground{
position:absolute; /* Absolute Positioning so we can use "top" and "Left" */
top:0px; /* Set top edge to 0px (Top of the screen) */
left:0px; /* Set left edge of image to 0px, so it starts at the left edge of the screen. */
width:100%; /* We want our widt to be 100% of our browser window */
height:auto; /* we don't care about the image height, so let it set itself based on the image's proportions */
position:fixed; /* Make our image scroll with the user so if they can scroll they don't leave our background behind, exposing the white "body" tag background. */
}
body {
text-align: center;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
margin: 0;
padding: 0;
}
#quote-conatiner {
position: fixed;
margin: auto auto 24px auto;
bottom: 20%;
left: 0;
right: 0;
text-align: center;
background-color:rgba(180, 180, 180, .4);
}
h3 {
font-family: Garamond sans-serif;
color: white;
width: 80%;
margin: .5em auto .5em auto;
}
.button {
font-family: sans-serif;
text-decoration: none;
padding: .3em 0.6em;
border-radius: 8px;
border: 2px solid #59169c;
background-color: #417;
color: white;
box-shadow: 0 0 64px black;
}
.button-container {
position: fixed;
margin-left: auto;
margin-right: auto;
top: 80%;
left: 0;
right: 0;
}
.button:active {
background-color: #330855;
}
#media only screen and (max-width: 600px) {
/* set image background to achieve max Height and we don't care about width (auto) on mobile displays. */
#imgBackground{
position:absolute;
top:0px;
left:0px;
width:auto;
height:100%;
position:fixed;
}
body {
margin: 0;
padding: 0;
}
h3 {
font-size: 1.2em;
}
.button {
font-size: 1.4em;
}
}
#media only screen and (max-width: 400px) {
/* set image background to achieve max Height and we don't care about width (auto) on mobile displays. */
#imgBackground{
position:absolute;
top:0px;
left:0px;
width:auto;
height:100%;
position:fixed;
}
body {
margin: 0;
padding: 0;
}
h3 {
font-size: 0.8em;
}
.button {
font-size: 1.0em;
}
}
/* May want to consider getting rid of this Query, if you don't it is overriding your styles set above your media querys. */
#media only screen and (min-width: 601px) {
/* Set image background qualities for any display larger than 601px.*/
#imgBackground{
position:absolute;
top:0px;
left:0px;
width:100%;
height:auto;
position:fixed;
}
body {
margin: 0;
padding: 0;
}
h3 {
max-width: 600px;
font-size: 1.3em;
}
.button {
font-size: 1.3em;
}
}
"background-size: cover" does not cover mobile screen
and
height: 100% or min-height: 100% for html and body elements?
held the answer. I had to set the height of the root elements for background-size: cover to work:
html {
height: 100%;
}
body {
min-height: 100%;
}
It works on the Nexus 4 and on the Galaxy Tab
Reason for having to do this (stolen from last answer):
Incidentally, the reason why you have to specify height and min-height to html and body respectively is because neither element has any intrinsic height. Both are height: auto by default. It is the viewport that has 100% height, so height: 100% is taken from the viewport, then applied to body as a minimum to allow for scrolling of content.
#Alex how exactly you want image to be display...for different screen size you can use the #media css property to resize image as per screen size.
#media screen and (min-width: 480px) {
body {
property: attribute;
}
}
See more about the #media css attributes here:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I'm trying very hard to resize my background images with my personal website: calebcharles.com.
I can't tell if this is something that needs to be done with a background-size: fix in CSS or if I need to create alternate images for media-query based fixes. I'm a new designer so please go easy! I'd sincerely appreciate a nudge in the right direction. Here is an example of one of the sections of my site:
h1.slide1 {
padding-top: 10%;
color: white;
background-image: url("images/rainbow.jpg");
background-position: 50%;
margin: auto;
padding-bottom: 10%;
text-align: center;
font-family: 'Amatic SC', cursive;
font-size: 400%;
background-attachment: fixed;
background-size: 100% 100%;
-webkit-background-size:100% 100%;
background-repeat: no-repeat;
}
full site is www.calebcharles.com. The backgrounds look awful on mobile devices. Please help!
What you have is a background that is spread to 100%. The background itself is a widescreen 1920x730 image while mobile resolutions are generally portrait.
Look into media queries and have multiple background resolutions pre-rendered.
.slide1 {
background-image: url('images/rainbow.jpg');
}
#media (min-width:768px) {
.slide1 {
background-image: url('images/rainbow-768.jpg');
}
}
#media (min-width:1920px) {
.slide1 {
background-image: url('images/rainbow-1920.jpg');
}
}
#media (min-width:2560px) {
.slide1 {
background-image: url('images/rainbow-2560.jpg');
}
}
I am trying to create a Reddit page using CSS. My problem is scaling. I want to make an object, .side, smaller in length. On my 1080p monitor, it looks great, but when I zoom in or out it will not scale with the browser. It is also too large on mobile.
Here is the code:
#header {
background: url(%%rtv6a%%);
background-repeat: no-repeat;
background-position: -3px 24px;
height: 130px;
}
#header-bottom-left
{
position: absolute;
bottom: 0;
}
div.side div.spacer:nth-of-type(5)
{
background:url(%%tangoglobe4%%) top center no-repeat;
padding: 250px 0 0;
margin-top: 20px;
}
div.side div.spacer:nth-of-type(5):hover
{
background:url(%%goglobal4%%) top center no-repeat;
padding: 250px 0 0;
margin-top: 20px;
transition: .6s;
}
body, .side, .titlebox form.toggle, .leavemoderator, .icon-menu a, .side .spacer
{
background:url(%%whiteticks%%);
}
.sitetable
{
background:url(%%ticks%%);
}
.morelink .nub
{
display: none;
}
.sitetable
{
max-width: 83%;
border-color: #5C5C5C;
border-style:solid;
border-width:1px;
}
Here is what I want it to look like: http://i.imgur.com/CM1Ejgp.jpg
When I scale it: http://i.imgur.com/HGsnSvD.png
You will notice the grey box get farther and father away. What can I do to fix this?
Sorry, I am new to coding.
You might want to look into media queries:
Media queries look at the capability of the device, and can be used to
check many things, such as:
width and height of the browser window
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution
and much more
You can use media queries to set sizes and widths of text or containers in CSS depending on the size of the browser. Eg:
#media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
I have an image background for a div that I want to show on different devices, The problem is that I have to give height of the image in order to fit it correctly. Now on different phones, I have to adjust the height with different px. forexample on iphones 65px works for portrait mode but not for landscape and etc. Is there a way that the div just gets resized in height to cover 100% of the background image?
here is my code
<style>
div.testing {
height: 95px;
background-image: url(/myimageurl);
background-repeat: no-repeat;
background-size: 100%;
}
#media screen and (max-width: 320px) {
/* iphone portrait */
div.testing {
height: 65px;
}
}
#media screen and (min-width: 321px) and (max-width: 480px) {
/* iphone portrait */
div.testing {
height: 80px;
}
}
</style>
<div class="testing"> </div>
You could use background-size: cover;
.thing {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
but why are you using a background-image? if you can use a regular image, you could do it like this:
.thing {
width: 100%;
max-width: [your biggest width];
}
.thing img {
display: inline-block;
width: 100%;
height: auto;
}
ALSO
I would recommend flipping your mindset on the max-width and start small screen first, using min-width and getting bigger.
And you don't really need div.testing - it can just be .testing
And if you are using a background image for a good reason... you should investigate making the div -
.thing {
height: 0;
padding-bottom: 30%; /* play with this */
}
This will keep the proportions... but it's only useful in specific cases.
A complete jsfiddle with an actual image would be useful.
Good luck!
Nest your div inside the background div and set the height to 100%