I faced my logo placement issue in IE for Vis-a-vis website. The logo looks fine in all browser except IE. So, I tried below code to fix, but no luck. Looking forward to get a best solution.
<!--[if !IE]><!-->
<style>
div.logo img {
margin-left:28%;
}
</style>
<!--<![endif]-->
<!--[if IE]><!-->
<style>
div.logo img {
margin-left:10%;
}
</style>
<!--<![endif]-->
Thanks
A few things are rendering incorrectly in Internet Explorer (not to sure why). So try increasing the size of your .wrap class and slightly increasing the left margin on the logo.
New CSS:
div.logo img {
margin-top: -10% !important;
margin-left: 29% !important;
background-image: url(img/logo-bg.png);
background-repeat: no-repeat;
background-size: cover;
padding: 45px 59px;
background-position: center center;
}
div.wrap {
max-width: 916px;
margin: 0 auto;
}
EDIT:
READ HERE. Using a conditional statement, like what you have does, to target IE10 and above will not work. Targeting IE9 and below is not accessible via this method. To target IE10 and above, you must use Javascript/jQuery or a specific CSS media query like below:
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
div.logo img {
margin-top: -10% !important;
margin-left: 29% !important;
background-image: url(img/logo-bg.png);
background-repeat: no-repeat;
background-size: cover;
padding: 45px 59px;
background-position: center center;
}
div.wrap {
max-width: 916px;
margin: 0 auto;
}
}
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
The website has a section, which has a background image. In the desktop website to make it look good, background image was made fixed so that it can have parallax effect. But in the mobile website, parallax does not make sense. So I wanted to remove the fixed in the mobile view. Here is the code I have tried.
<section class="girl-cover-photo">
</section>
.girl-cover-photo {
height: 730px;
background: url("../img/girl-cover.jpg") fixed;
background-repeat: no-repeat;
background-size: cover;
}
#media screen and (max-width: 768px) {
.girl-cover-photo .girl-cover-photo {
background: url("../img/girl-cover.jpg") relative;
}
}
But somehow the parallax shows up in the mobile view. Any pointers on what to do to fix this?
instead background: url('../img/girl-cover.jpg') relative;
use background: url('../img/girl-cover.jpg') scroll;
https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment
.girl-cover-photo{
height: 730px;
background: url('http://media02.hongkiat.com/baby_photography/baby_photography.jpg') fixed;
background-repeat: no-repeat;
background-size: cover;
}
#media screen and (max-width: 768px){
.girl-cover-photo{
background: url('http://media02.hongkiat.com/baby_photography/baby_photography.jpg') relative;
}
}
<div class="girl-cover-photo"></div>
Try this
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');
}
}
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)