So i have this problem with an image, which won't load in my responsive.css code. I'm trying to change a background image according to various resolutions of the website. below i post the parts of my codes in html and responsive.css. I already checked the path to the image and the image is in the file which contains html, css, responsive. Any tips how to make it work? I'm a beginner when it comes to html and css.
HTML:
#background {
width: 100vw;
background-position: center;
background-size: cover;
}
responsive.css: figure {
width: 100%;
}
#media (max-width: 992px) {
#background {
height: 50vh;
}
}
#media (min-width: 993px) and (max-width: 1170px) {
#background {
height: 70%;
width: 100%;
background-image: url('../zadanie-domowe-rwd-materialy/obrazy/man-2.jpg');
}
}
<figure>
<img src="zadanie-domowe-rwd-materialy/obrazy/man-1.jpg" alt="Zdjęcie nr 1" id="background">
</figure>
Your HTML needs an amendment:
<body>
<figure id="background"></figure>
</body>
Remove the img tag and apply an id of background to the figure tag.
Img tags are not background images, so all images will appear on top of backgrounds. To create the condition, both images need to be added within css as background-image
You will need to add this to your css too:
#background {
position: relative;
height: 500px; // Or a different height
width: 100%; // Change to 100% of element or window
background-position: center;
background-size: cover;
// Add the follow
background-image: url('../zadanie-domowe-rwd-materialy/obrazy/man-1.jpg');
}
Update: Entire Code
HTML
<body>
<figure id="background"></figure>
</body>
CSS
#background {
position: relative;
height: 500px; // Or a different height
width: 100%; // Change to 100% of element or window
background-position: center center;
background-size: cover;
background-image: url('http://placehold.it/350x150');
}
#media (min-width: 992px) and (max-width: 1170px) {
#background {
background-image: url('https://unsplash.it/200/300');
}
}
See JsFiddle
I hope this helps
For responsive only change .css file not HTML . if you want to change the img in mobile or other device ing use in css Like this
Try it i thing it's helpful . https://jsfiddle.net/dup1d62k/4/
Related
I am working on one page website and I set one background image for all sections using a div like the following :
<div style="background-image: url(./img/12.jpg)" class="sec">
</div>
in css my code is the following :
.sec{
background-repeat: no-repeat;
background-size:cover;
}
all is working fine but the mobile doesn't look pleasant to me so i tried to add different background image url to my css with no luck like the following :
#media only screen and (max-width: 600px) {
.sec{
background-repeat: no-repeat;
background-size:cover;
background-image: url(/img/1255.jpg);
}
}
I just want to know which part I am missing and why I cant have 2 different images for different resolution
You are having this problem because inline css overrides internal/external css, see here.
Change your code to
<div class="sec">
</div>
and
.sec{
background-repeat: no-repeat;
background-size:cover;
background-image: url(./img/12.jpg)
}
#media only screen and (max-width: 600px) {
.sec{
background-repeat: no-repeat;
background-size:cover;
background-image: url(/img/1255.jpg);
}
}
The style property in thr div gains precedence over the CSS one so probably that's the reason why the second image won't come. It'd be better to do it all in CSS. Check the example below.
.sec {
// You can ignore the height and width
width: 100vw;
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
background-image: url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg');
}
#media only screen and (max-width: 400px) {
.sec {
background-image: url('https://fsb.zobj.net/crop.php?r=TQ17OTvRvqIRq6m-kcLMlU-g68IHkNtXYQ5B3j9twk_CkS6zM7rH_C-OzOS4iVM6pDE9P2fHuo3Swz1_qVGWT7gRAIxzDby0x7rrCtfroFsHSC7aau-HbAFN7i6SGowXNJmowCJGeoUz5S-Uj16rIKacUVpvxTXLR4YhxW2NK_BXHJErHMF1oh7lD4k');
}
}
<div class="sec"></div>
you can do same way just add background-image: url(/img/1255.jpg)!important in the mobile device.
I have to make a website for my html class.
When I open the page on my computer, the images fit how I want them to fit.
But when I try to open it on the school computers, it is like 50% of what I expect it to be. I'm guessing its because of different screen resolutions. How do I make it work on all resolutions?
Here's a picture.
http://i.imgur.com/7YsCSpa.png
The logo on the top stays in position but the pink bar wont. It doesnt fill across the entire screen.
My html is <div id="headbar">
<img src="headbar.png" alt="bar" />
</div>
My css is
#headbar {
position: fixed;
margin-top: 85px;
width: 100%;
z-index: -1;
background-attachment: fixed;
Use Media Queries in CSS.
Example:
#media (min-width: 1200px) and (max-width: 1400px) {
#headbar {
position: fixed;
margin-top: 85px;
width: 100%;
z-index: -1;
background-attachment: fixed;
}
#media (min-width: 800px) and (max-width: 1200px) {
#headbar {
position: fixed;
margin-top: 35px;
width: 100%;
z-index: -1;
background-attachment: fixed;
}
Is headbar.png a image that should make #headbar fully pink? Then it could be as simple as :
#headbar img {width: 100%}
It will then be scaled though. To prevent this, give #headbar a height and make the image 100% height. Of course it would make more sense to make it a background image (or color if it is pink only).
Edit - going on current information, would this be what you're after?
#headbar {
width: 100%;
height: 50px;
position: fixed;
margin-top: 85px;
z-index: -1;
background-image: url(headbar.png);
background-size: 100% 100%
}
I've just added some height - adapt this to what fits best. One more thing to beware of is to get the correct path to the image (absolute url is easiest)
background-image: url(/imagefolder/headbar.png);
I want to insert an image by CSS because I want to use captions over my image.
What I want is that the image shows completely and is responsive.
Can anyone help me with this?
Here you can see my HTML im using bootstrap. As you can see i want to let contentblock1 show an responsive image by using the CSS background-image code. I also want this background image to be responsive. But whatever i try it won't show me the background.
<div class="container">
<div class="col-sm-6">
<h1> Dit is een bootstrap site</h1>
<button type="button">click me!</button>
</div>
<div class="col-sm-6">
<div class="contentblock1">
</div>
</div>
I'm using the following CSS
.contentblock1 {
background-image: url('http://1.bp.blogspot.com/_zxdOSKs0ASI/TDMqbnatRwI/AAAAAAAAAkM/nB-DxcVcqqk/s1600/Testbeeld.jpg');
background-size: 100% 100%;
width: 100%;
}
width: 100px; /*you width*/
height: 100px; /*you height*/
/* optional: background-color: white; */
background-image: url('image.png');
background-repeat: none;
background-size: 100% 100%;
/*or
background-size: cover;
background-position: 50% 50%;*/
background-attachment: fixed;
#some-div {
background-image: <imgurl>;
background-repeat: none; //Unless you want something else
backgorund-size: 100% 100%;
}
and for responsiveness, use media-queries or a lib that is made for responsiveness such as Bootstrap.
Below you have an example of media-queries.
#media (min-width: 1200px)
{
#some-div {
width: 600px;
}
}
#media (max-width: 768px)
{
#some-div {
width: 100%;
}
}
EDIT:
http://jsfiddle.net/e8xLf4u3/
Here is your working example, it only needed content. Also, in the future please show some code for faster help and better understanding
Graag gedaan ;)
I am in need of some assistance.
I am currently working on a site that is going to be responsive.
Will post a link to an image of the psd of the site so you have an idea what it is supposed to be like.
Link to the site itself
the site has a width of 1200px as you scale the site you will see that the boat will do nothing
Now to the problem.
the problem lays with the boat this img is 1019x1732 and is positioned absolute. And needs to be so because i have to use the z-index to be able to position it above some other divs for it is rather big.
I have tried to put it in as a background-image and as an img tag with a relative div around it. but nothing happens.
My appolagies if my question is a hard to understand. have a hard time explaining problems to other people, it always makes more sence in my head.
Here is my code:
my html
<div id="wrapperHero">
<div id="hero">
<p>The "Banarly Group" has been operating<br>
in Nigerian, Gabonese and Cameroon waters<br>
since 1995.
</p>
<div id="circle">
<p>a fleet of<br>
<span class="number">24</span><span class="trawler">trawlers</p>
</div>
</div>
<div id="boat">
<img src="img/BAN_herofg.png" alt="boat">
</div>
</div>
My css:
#wrapperHero {
width: 100%;
background-image: url(../img/BAN_herobg.png);
background-repeat: repeat-x;
min-height: 795px;
margin-top: -23px;}
#hero {
max-width: 1200px;
width: 100%;
height: 100%;
margin: 0 auto;}
#boat {
background-image: url(../img/BAN_herofg.png);
background-repeat: no-repeat;
position: absolute;
height: 100%;
width: 100%;
z-index: 1;
right: -6%;
top: 240px;}
#circle {
border-radius: 50%;
width: 18.3333%;
min-height: 220px;
background-color: #fff;
background-color: rgba(255,255,255,0.2);
float: right;
margin: -230px 21.6666% 0 0;}
1:
You can use background-size , background-position-x with different media :)
#boat {
background-size: 590px;
background-position-x: 79px;
}
#media (min-width: 450px) and (max-width: 960px) {
#boat {background-size: //use different size;
background-position-x://use different size;}
}
If I got the question right, here's what you should do:
remove the background-image property from #boat
create <img src="img/BAN_herofg"> inside
set max-width: 100% to <img>.
Hope this will solve your problem.
Use css media queries to solve your problem...
ex:
#media (min-width: 600px) and (max-width: 800px) {
html { background: red; }
}
Hi I have several divs on my page which have background images that I want to expand to cover the entire div which in turn can expand to fill the width of the viewport.
Obviously background-size: cover behaves unexpectedly on iOS devices. I've seen some examples of how to fix it, but I can't make them work in my situation. Ideally I'd prefer not to add extra <img> tags to the HTML but if it's the only way then I will.
Here is my code:
.section {
margin: 0 auto;
position: relative;
padding: 0 0 320px 0;
width: 100%;
}
#section1 {
background: url(...) 50% 0 no-repeat fixed;
background-size: cover;
}
#section2 {
background: url(...) 50% 0 no-repeat fixed;
background-size: cover;
}
#section3 {
background: url(...) 50% 0 no-repeat fixed;
background-size: cover;
}
<body>
<div id="section1" class="section">
...
</div>
<div id="section2" class="section">
...
</div>
<div id="section3" class="section">
...
</div>
</body>
The question is, how can I get the background image to completely cover the section div, taking into account the variable width of the browser and the variable height of the content in the div?
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.
For my case:
.cover {
background-size: cover;
background-attachment: fixed;
background-position: center center;
#media (max-width: #iphone-screen) {
background-attachment: scroll;
}
}
Edit: The code block is in LESS and assumes a pre-defined variable for #iphone-screen. Thanks for the notice #stephband.
I've had this issue on a lot of mobile views I've recently built.
My solution is still a pure CSS Fallback
http://css-tricks.com/perfect-full-page-background-image/ as three great methods, the latter two are fall backs for when CSS3's cover doesn't work.
HTML
<img src="images/bg.jpg" id="bg" alt="">
CSS
#bg {
position: fixed;
top: 0;
left: 0;
/* Preserve aspect ratio */
min-width: 100%;
min-height: 100%;
}
Also posted here: "background-size: cover" does not cover mobile screen
This works on Android 4.1.2 and iOS 6.1.3 (iPhone 4) and switches for desktop. Written for responsive sites.
Just in case, in your HTML head, something like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
HTML:
<div class="html-mobile-background"></div>
CSS:
html {
/* Whatever you want */
}
.html-mobile-background {
position: fixed;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 125%; /* To compensate for mobile browser address bar space */
background: url(/images/bg.jpg) no-repeat;
background-size: 100% 100%;
}
#media (min-width: 600px) {
html {
background: url(/images/bg.jpg) no-repeat center center fixed;
background-size: cover;
}
.html-mobile-background {
display: none;
}
}
There are answers over the net that try to solve this, however none of them functioned correctly for me. Goal: put a background image on the body and have background-size: cover; work mobile, without media queries, overflows, or hacky z-index: -1; position: absolute; overlays.
Here is what I did to solve this. It works on Chrome on Android even when keyboard drawer is active. If someone wants to test iPhone that would be cool:
body {
background: #FFFFFF url('../image/something.jpg') no-repeat fixed top center;
background-size: cover;
-webkit-background-size: cover; /* safari may need this */
}
Here is the magic. Treat html like a wrapper with a ratio enforced height relative to the actual viewport. You know the classic responsive tag <meta name="viewport" content="width=device-width, initial-scale=1">? This is why the vh is used. Also, on the surface it would seem like body should get these rules, and it may look ok...until a change of height like when the keyboard opens up.
html {
height: 100vh; /* set viewport constraint */
min-height: 100%; /* enforce height */
}
That its the correct code of background size :
<div class="html-mobile-background">
</div>
<style type="text/css">
html {
/* Whatever you want */
}
.html-mobile-background {
position: fixed;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%; /* To compensate for mobile browser address bar space */
background: url(YOUR BACKGROUND URL HERE) no-repeat;
center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 100% 100%
}
</style>
For Safari versions <5.1 the css3 property background-size doesn't work. In such cases you need webkit.
So you need to use -webkit-background-size attribute to specify the background-size.
Hence use -webkit-background-size:cover.
Reference-Safari versions using webkit
I found the following on Stephen Gilbert's website - http://stephen.io/mediaqueries/. It includes additional devices and their orientations. Works for me!
Note: If you copy the code from his site, you'll want to edit it for extra spaces, depending on the editor you're using.
/*iPad in portrait & landscape*/
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* STYLES GO HERE */}
/*iPad in landscape*/
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* STYLES GO HERE */}
/*iPad in portrait*/
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* STYLES GO HERE */ }
#media (max-width: #iphone-screen) {
background-attachment:inherit;
background-size:cover;
-webkit-background-size:cover;
}
I found a working solution, the following CSS code example is targeting the iPad:
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
html {
height: 100%;
overflow: hidden;
background: url('http://url.com/image.jpg') no-repeat top center fixed;
background-size: cover;
}
body {
height:100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
}
Reference link: https://www.jotform.com/answers/565598-Page-background-image-scales-massively-when-form-viewed-on-iPad
html body {
background: url(/assets/images/header-bg.jpg) no-repeat top center fixed;
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
-webkit-background-size: auto auto;
-moz-background-size: auto auto;
-o-background-size: auto auto;
background-size: auto auto;
}