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/
Related
I have a 3051 x 1716 pixel image.
When in mobile I want to view it like the following without cropping the image and uploading it second time:
I mean I just want to change the horizontal center of the image and change the width according to sceensize given it is a mobile screen.
How can I do that?
You could do a media query on a background-image like below, but its actually not best practice: only load what you really need on mobile devices to get faster pageloads. And don't use background images to display important content... so you might wanna look into using the picture tag and responsive images: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
However, if two seperate image files are not an option, here is a solution:
.container {
background-image: url("https://images.unsplash.com/photo-1615731364858-99013ac4fad3?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2550&q=80");
background-size: cover;
background-position: left;
height: 100vh;
width: 100%;
}
#media only screen and (min-width: 600px) { // set to your mobile view breakpoint
.container {
background-position: center;
width: 100%;
height: 300px; // or whatever height you want
}
}
<div class='container'></div>
Can you please check the below code? Hope it will work for you. If you will take an image as a background image then you will be able to set the position of the image as per your requirement. We have used background-size and background-position properties to adjust the image.
Please refer to this link: https://jsfiddle.net/yudizsolutions/xhsb7ocL/3/
.banner-bg {
background: no-repeat center center / auto 100%;
position: relative;
display: block;
width: 100%;
height: 400px;
}
#media screen and (max-width: 767px) {
.banner-bg {
background-position: left center;
}
}
<div class="banner-bg" style="background-image:url('https://i.stack.imgur.com/Y3Wi7m.jpg')">
</div>
I am new to CSS and media queries and I have also followed this thread but didn't got my problem solved. I have an image which is bigger than the screen resolution. The dimension of image is 1532*933 and the resolution of my desktop is 1366*768. I am trying to make a page in which the image is in the background of the body. I am trying to perfectly fit the image on the screen. So for that I have written this CSS
html, body {
min-height: 100%;
}
body{
font-family: 'Source Sans Pro', sans-serif;
background-image: url("/public/images/image.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: 0, 0;
}
#media (min-width: 1024px), (min-height: 630px) {
body { background-size: auto; }
}
But I can clearly see that the image is not getting placed properly. It's being cut off from the bottom side and right hand side. I want to place this image properly in the full screen (means top=0, bottom = 0, right = 0, left = 0) without losing the quality of image.
Also I am trying to get the image perfectly fit in other resolutions as well using the same image, so I am using media queries.
How can I achieve this ?
Regards
I hope it could help:
body, html {
height: 100%;
}
.bg {
/* The image used */
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Red_flag.svg/1280px-Red_flag.svg.png");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="bg"></div>
</body>
</html>
You have many options. If you need this page only on your pc you can edit yuor image with a dedicated application and then use this in your page. If you need a responsive layout you should use several versions of the image that you want to provide as background image and use media queries to choice the right one for your device. Let's say that you have an image called image.jpg (500x500) you can force resizing using height and width but the image will lost its quality. However you can use media queries like this:
/*width and height of an ipad*/
#media (min-width: 768px), (min-height: 1024px) {
body { background-image: url("/public/images/image_ipad.jpg"); }
}
/*width and height of a Galaxy S5*/
#media (min-width: 360px), (min-height: 640px) {
body { background-image: url("/public/images/image_galaxy.jpg"); }
}
Obviously you can play around with media queries a little better choosing only width range so you can say from x width to y width i will use this image and so on. Keep in mind that for this purpose you can use a vectorial image to make things easier for you.
Try
#media (min-width: 1024px) and (min-height: 630px) {
body { background-size: auto; }
}
I have figured out a way to achieve this. My image is perfectly aligning now without any distortion. Here is my code snippet:
.main-background {
background: url("https://static-fastly.hackerearth.com/static/hackerearth/images/logo/HE_logo.png") no-repeat center;
margin: 0;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.main-content {
height : 100vh;
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body class="main-background">
<div class="main-content">
</div>
</body>
//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 tried to do this:
#media only screen and (max-width: 500px) {
body {
background: url("http://popidesigns.ro/images/bgtel.png") no-repeat center center fixed;
}
}
With the new picture # 1080x1920(normal it was 1920x1080)
But no change. How can I make the BG Pic visible on the whole phone screen?
(the bg image is that thing above the logo)
phone ss
laptop ss
add background-size: cover to fill the container/body
...and make sure the body is at least 100% high by adding
html, body {
height: 100%;
}
See if this helps you: https://codepen.io/panchroma/pen/KyrvOP
CSS
html, body {
height: 100%;
}
#media screen and (max-width: 500px) {
body{
background:url('http://popidesigns.ro/images/bgbgb.png') no-repeat;
background-size:cover;
}
}
I also added a viewport meta tag in the head of the page
<meta name="viewport" content="width=device-width, initial-scale=1.0">
body{
background: URL("http://popidesigns.ro/images/bgtel.png") no-repeat center;
background-size: cover;
width: 100%;
}
This will make sure that the image doesn't repeat and is centered. The background-size:cover; will ensure that the image will cover the entire screen. width at 100% helps with that.
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%;