I have a 4496x3000 image I am using for a background image. It's responsive until it get down to about 1190px at which time it's not. I thought maybe creating a media query and using a smaller image would help but it did not. What is wrong with my code that makes it stop being responsive?
body, html {
margin: 0;
padding: 0;
width: 100%
}
.bgimg {
width: 100%;
background-image: url(../img/pexels-photo-Original-4496x3000.jpeg);
opacity: 0.65;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: #464646;
}
#media only screen and (max-width : 1190px) {
.bgimg {
background-image:
url(../img/pexels-photo-medium-1280x854.jpeg);
}
}
<body class="bgimg">
I tried the code without media query and it worked well i.e. made my background image responsive. You should try using another (bigger) image and without using media query.
Related
I've been struggling with this one for a while, so hoping someone might be able to help me out.
I'm using WP Bakery plugin, and the page background images I set are really blurry on smaller screens. All looks fine on the Wordpress/Chrome visual editors, but on an actual phone/tablet the photo doesn't resize, so it's just a blurry mess. The CSS is as follows:
body {
background-color: #00657f!important;
background-image: url(http://414kiting.com/wp-content/uploads/2018/07/player_hantu_light-50.jpeg) !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
}
website address is 414kiting.com
Any help hugely appreciated.
I found the solution- this will surely work :), Can you please try this with media query :
#media only screen and (max-width : 767px ) {
body {
background-attachment: initial;
}
body:before {
content: "";
display: block;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: url(http://414kiting.com/wp-content/uploads/2018/07/player_hantu_light-50.jpeg) !important;
background-size: cover;
background-position: center center;
}
}
Lots of mobile browsers don't support
background-attachment: fixed;
Best way to solve this is to make a media query for tablet sizes and lower to make the background-attachment: scroll or initial and then try to simulate the effect or just discard it on mobile devices.
Edit: typo
I am using Ionic and Angular to build mobile Applications.
I am now using Ionics sidemenu with a background:
.menu.menu-left {
background-image: url('../img/menu_background.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
The Application can run on different screen sizes from smpartphones over tablets to desktops so i need to provide different image sizes.
Do i have to provide an image for each display size or can i somehow resize the background image on startup and set the resized version to be the background?
You could try #media css to display different image per view. For example:
#media screen and (max-width: 1199px) {
.menu.menu-left {
background-image: url('../img/menu_background.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: 50%;
background-attachment: fixed;
}
}
#media screen and (max-width: 767px) {
.menu.menu-left {
background-image: url('../img/menu_background_2.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: 50%;
background-attachment: fixed;
}
}
Or you could just set correctly your css for the background like that:
.menu.menu-left {
background-image: url('../img/menu_background.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: 50%;
background-attachment: fixed;
}
I'm trying to place a fullscreen background image combined with a repeating background image without the use of J-query. Is it possible?
This is the code I use to get my image fullscreen:
body {
background: url(../img/bg1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
But now I want this completely overlapped by a .png image background that needs to have a repeat function, for the simple reason that the .png contains lines which will rescale and look awful on certain screen sizes.
Any ideas?
Already tried:
Giving html a background and body a background, it will only display one of both.
Be aware that multiple backgrounds won't work on ie8 if needed:
http://caniuse.com/multibackgrounds
This answer will work on every browser:
You must give width and height to the elements.
You can see answer here: http://jsfiddle.net/Rc38f/
HTML Code:
<html>
<body>
<div id="wrapper"></div>
</body>
</html>
CSS Code:
html {
width: 100%;
height: 100%;
}
body {
background-image: url('http://www.colourbox.com/preview/4632391-637684-seamless-small-white-flowers-pattern-background.jpg');
background-repeat: repeat;
width: 100%;
height: 100%;
}
#wrapper {
background: url('http://i.telegraph.co.uk/multimedia/archive/02403/Jonstockshooting_2403237b.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
}
It is possible to include two background images on one tag.
How it Works
Multiple background images can be specified using either the
individual background properties or the background shorthand property.
This should be a Helpful resource to get you started.
css:
body {
background-image: url(http://www.wallcoo.com/paint/Chiplegal_vector_art/images/%5Bwallcoo.com%5D_vector_art_0seasons.jpg), url(http://nopgc.org/v2/images/body_bg.jpg);
background-position: top center, center;
background-repeat: no-repeat, repeat;
width: 100%;
height: 100%;
}
fiddle: Demo
I have a div with background image and i set background-size:cover to make full width and height background image. but its not working in ios devices how can i set it for ios devices please help me
thanks
It should be background-size: cover; and not background-image. Also, you should be using browser prefixes as the property was released under CSS3 Specification1..
body {
background-image: url(#);
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
1. Browser Support
edit - Updated Fiddle
I had a similar problem. I got my solution by setting a scroll attribute for background. Also be sure to set the parent container to 100% height and width. AdrianS has the right point for aiming at html to set 100% height and 100% width.
In the following code, I have a header class for the background image. Adapt it as you need.
Check out a fiddle at http://jsfiddle.net/Bavc_Am/7L3gD/5/
Upvote if helpful please, I'm new here.
html,
body {
height: 100%;
width: 100%;
}
/* Full Page Image Header Area */
.header {
display: table;
height: 100%;
width: 100%;
position: relative;
background: url(http://placehold.it/800x800.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* Responsive */
#media (max-width: 768px) {
.header {
background: url(http://placehold.it/800x800.png) no-repeat center center scroll;
}
}
User mkubilayk posted the solution the really worked for me here. The lifesaver whas the property below:
background-attachment: scroll;
Quoting:
I have had a similar issue recently and realised that it's not due to
background-size:cover but background-attachment:fixed.
I solved the issue by using a media query for iPhone and setting
background-attachment property to scroll.
.cover {
background-size: cover;
background-attachment: fixed;
background-position: center center;
#media (max-width: #iphone-screen) {
background-attachment: scroll;
} }
The solution I will provide can be seen here. But with a minor change. This method is tested many times and for IE it has IE8+ support. You can see the full browser support in the link that I provided.
html {
width: 100%;
height: 100%;
}
body {
background: #Fallback-color;
background: url(../images/image.jpg) center top no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/image.jpg',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/image.jpg', sizingMethod='scale')";
height: 100%;
}
I want to create a perfect full background image that is static and that fills the viewport, no matter what the size of the screen(viewport) is.
So I use the following CSS:
body, html{
width: 100%;
height: 100%;
background: url('http://ns223506.ovh.net/rozne/d4857d4e0f68027e7af6b70d5488b7e6/wallpaper-751328.jpg') no-repeat center center fixed;
margin: 0;
padding: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Now the problem is...As far as I understand, when the viewport size exceeds the size of the image, the image will stretch and will pixelate...
How can I prevent the max size being passed?
Also, what is the best way to approach this screen size problem when you want to cater for retina display resolutions? Set a max-width on the body, html elements?
Thank You
You can use #media queries to decide till what resolution you want the image to cover the entire page, if the resolution gets bigger, either replace it with another image, or simply use center value for background position and a background color, if you are not looking to cover the image after certain resolution, this will prevent the image to get pixelat.. For example
Demo (Resize the fiddle window for desired effect)
html, body {
height: 100%;
width: 100%;
}
body {
background-image: url('https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-frc1/p480x480/1231_381212385330183_1145397211_n.jpg');
/* If it exceeds 699px width, you can also replace the image here... */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#media all and (max-width: 699px) {
body {
background-color: #000;
background-image: url('https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-frc1/p480x480/1231_381212385330183_1145397211_n.jpg');
background-size: 200px 200px;
background-repeat: no-repeat;
background-position: center center;
}
}
Note: I've used #media all and (max-width: 699px) and background-size: 200px 200px here in this example
just for demonstration purposes, you can replace this with original
height/width of your image and the desired resolution for #media rule