So on smaller screens, my current headers I have managed to get down to the size I want using the #media css styling for responsive. But as the image in my headers is a background image, it repeats when I shrink it down. I tried switching it to cover, but the image switches back to being full size, so only shows a small snippet of the image instead.. Here is the code I am looking at;
Page - http://outsidetheline.co.uk/01.html
(Focusing on the top image header container)
HTML:
<section class="meta-wrapper parallax" style="background-image: url('content/single_blog_bg.png');" data-stellar-background-ratio="0.6" data-stellar-vertical-offset="20">
<div id="page_header" class="mini-padding">
<div class="container-fluid">
</div>
</div><!-- end page_header -->
</section><!-- end section -->
CSS;
#media only screen and (max-width: 767px)
.parallax {
position: relative;
background-attachment: fixed;
background-position: center;
background-size: contain;
}
#media only screen and (max-width: 767px)
#page_header .container-fluid {
padding: 20rem 0 0;
}
The background image css is coming from element-style.
I tried a few things, such as margin:auto, cover rather than contain etc but it results in the image showing huge rather than nicely fitted.
Use background-repeat: no-repeat:
#media only screen and (max-width: 767px)
.parallax {
position: relative;
background-attachment: fixed;
background-size: contain;
background-repeat: no-repeat;
}
You need:
background-repeat: no-repeat;
Related
I made a hotspot login site that has to work for devices with smaller resolutions / screens so my background has to scale with it. Now the problem is that is scales, but it sticks to the top of the screen. So when the resolution gets too small, there is a white void beneath the image. This is what is looks like: https://imgur.com/a/0jAprjJ
This is my CSS code for the background styling:
background-image: url("img/AngelntrÃĪgtGelb.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
What you can do is a media query for screen sizes less than, wherever it breaks and use this for your image size:
#media only screen and (max-width: 600px) {
body {
background-size: auto 100vh;
background-position: center;
}
}
//html code for parallax - help required here.
I have added div for parallax with name parallax and parallax css in stylesheet. How can I disabling it for the mobile and desktop view? I had gone through numerous posts but no help.
But I don't want it to be disabled for desktop. I just want it to stop working for the mobile. Can something be done about it? when i use the media query it disables on my desktop but works fine on mobile.
</head>
<style>
#media only screen and (min-width: 320px) and (max-width: 989px) {
.parallax {
background-attachment: scroll !important;
}
Parallax code:
.parallax {
/* The image used */
margin-top: 30px;
background-image: url("images/teodorik-mensl-316897-unsplash.jpg");
/* Set a specific height */
height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<body>
//parallax declaration
<div id="PaperCall" class="parallax"></div>
</body>
What you're looking for is known as a media query, which is denoted by wrapping your selector in #media screen and (min-width: x). Anything within this #media tag will only get applied to devices matching the specified criteria (in this case, a minimum width).
Simply set the minimum width to correspond to the width of the smallest device you wish to include for the parrallax effect. A list of common devices and their corresponding widths can be found here, but you'll probably want something like 480px.
Here's a full example:
#media screen and (min-width: 480x) {
.parallax {
/* The image used */
margin-top: 30px;
background-image: url("images/teodorik-mensl-316897-unsplash.jpg");
/* Set a specific height */
height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
}
<body>
//parallax declaration
<div id="PaperCall" class="parallax"></div>
</body>
I am pretty new to this front-end stuff. I have an image 1200 * 900 px which i am using as a background for my banner. The image seems good on larger screens but when I switch to Apple iPhone 6S from responsive design mode. The background gets cutt off from sides. How do I retain complete image while still on smaller sizes.
index.html
<div class="container-fluid banner">
<div class="row">
<div class="col-md-8 content">
<h1>TThis is a banner image.</h1>
<p>Banner image is the main image we use on our web pages showing what your page is all about.</p>
</div><!--/.col-->
</div>
</div>
style.css
.banner {
background: url(banner.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 680px;
position: relative;
}
Some solutions i have tried say to set max-width: 100% on smaller screen size using media queries
#media (max-width: 768px) {
.banner{ max-width: 100%; }
}
But this solution doesn't work. What are my other options to scale this background with screen sizes ?
If you want to display the full picture you should use contain instead of cover.
And if you want to keep cover for larger screens you can change the cover to contain only in your queries.
#media (max-width: 768px) {
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
I've made a banner for my new webshop, but there is one problem.
When the website is in full size for example on my laptop, the banner fits perfect, but when i see the website on mobile, laptop and smaller size then banner isn't fitting.
I really hope that some of you could help me to get the banner auto fitting.
The HTML code:
<script type="text/javascript">
var bannersnack_embed = {"hash":"bxplv88nb","width":900,"height":297,"t":1425594057,"userId":17355456,"wmode":"transparent"};
</script>
<script type="text/javascript"src="http://files.bannersnack.com/iframe/embed.js"></script>
Try look into using different image formats for different screens and CSS #media queries. Example:
#media screen and (max-width: 980px) {
/*Your CSS here*/
}
Also you might want to use responsive element with background image. Example:
body {
width: 100%;
}
.banner {
width: 100%;
height: 100px;
box-sizing: border-box;
background: url(http://static1.squarespace.com/static/51d44341e4b085686833bb66/520a9569e4b007829c46f58d/520a969be4b007829c473837/1378226922960/?format=1000w);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #fff;
}
<div class="banner"></div>
Here is a good tutorial: https://css-tricks.com/perfect-full-page-background-image/
http://graduateland.com/
How do i prevent the images from compression. When I reduce the size of my browser window, the image get compressed side way, it's like the human head being compressed.
Looking at that website as an example, the image size isnt affected when screen size changes, only the position of the image changes. How do i do that?
Current CSS
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
If you want images to be resized when the window shrinks, just change height: 500px to height: auto in the CSS you posted. This will force images to keep their original ratio as the width changes. The way your code works right now is that it resizes the image horizontally so it is never wider than its container, but has a fixed height, which messes up the aspect ratio once it begins to shrink horizontally.
If you want the image to stay the same size and just move position as the browser window shrinks you need to apply them as a background-image. Try this CSS code on the container div you want to apply the image background to:
#container {
background: url(path/to/image.jpg) no-repeat center top;
}
On the site you linked they are appyling this CSS
display: table;
width: 100%;
height: 100%;
margin-top: 0;
padding-bottom: 0;
background-image: url("a/image.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
onto a div. But there are great inspector tools which can inspect that for you, so don't ask if you have a 'living' example.
You should particularly have a look at the background properties.
Here's the answer:
Responsive Images with CSS
CSS:
max-width:100% !important;
height:auto;
display:block;
Use #media, like:
#media screen and (max-width: 1280px) and (max-height: 1024px) {
.splash {
background-image: url('../img/splash-1280.jpg');
}
}
#media screen and (min-width: 1281px) and (max-width: 1920px) and (max-height: 960px) {
.splash {
background-image: url('../img/splash-1920.jpg');
}
}
In their CSS:
#media (max-width: 1280px)
[id="get-started"] {
background-size: auto;
background-position: center top;
}
Which overrides:
background-position: center center;
background-size: 100%;