I have used both HTML and CSS code to center a top of page banner. At 600 pixels, it is too wide for mobile phones, so I also substitute a 310px image for mobile phone viewports. After modifying jmore009's code, I got it down to the following that works and validates. But I had to use centering code in both the HTML and CSS. Is that the correct way to center it?
HTML 4.01 code:
<div class="centered">
<img src="images/short_banner.gif" alt="MYSITE.COM" class="image2">
<img src="images/long_banner.gif" alt="MYSITE.COM" class="image1">
</div>
CSS 3.0 code:
.image2{
display: none;
}
#media only screen and (max-width: 600px)
{
.image1 {
display: none;
}
.image2 {
display: block;margin:0 auto;
}
}
div.centered {
margin: 0 auto;
text-align: center;
}
I could not get the short banner to center without using a DIV. There must be a better way to center both the swapped banner images without using centering in both HTML and CSS code.
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 trying to crop the image using display and justify-content in CSS as per the screen size. The image look like below, between the vector header and start of the image some padding is there. This image looks fine when it is displaying in the desktop based screen, but in mobile based screen it is not displaying fine. I am using the below CSS to crop the image in my web page.
Image Looks
CSS Code
.container {
width: 100%;
height: 68px;
overflow: hidden;
display: flex;
justify-content: left;
position: sticky;
position: -webkit-sticky;
}
HTML code
<div class="container">
<img src="/header.png">
</div>
After cropping the image using CSS, the image look like below
But I also want to crop in the beginning of Vector Header based on the screen size like below. Is there is any way in CSS to do this with the existing CSS code.
Thanks in advance for your suggestion and advice.
Try background-position property
#header {
background-image: url('https://i.stack.imgur.com/9RIPB.png');
background-position: -30px 0px;
width: 200px;
height: 100px;
}
<img id="header" />
In my Project, I set my background to an image I chose.
The code for that is here:
<body>
<img class="backgroundimg" src="{% static 'spotifywallpaper.jpg' %}" style='position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:-1;'>
</body>
I then use a media query in css. I am new to these queries and development in general, so please tell me if I am doing anything wrong or in an inefficient away.
My query basically says If the width of the page is 700px or less, set the image width to 100%. When testing this, my image doesn't refit to the page, instead stretches inwards causing a horrible effect to the image.
Here's my media query code:
#media screen and (max-width: 700px) {
.backgroundimg {
width: 100%;
}
}
Does anybody know why this isn't working? Thank you.
UPDATED:
CSS
.mydiv {
background-image: url('https://wallpaperaccess.com/full/667865.jpg');
width: 100%;
height: 100%;
object-fit:cover;
}
HTML
<div class="mydiv">
Placeholder
</div>
This code does not work correctly. I background to function exactly the same as it did with the image tag, this time with a div.
UPDATE 2:
This code does not set the width and height of the image to 100% of the page as expected.
HTML
<img class="bgimage"src="{% static 'spotifywallpaper.jpg' %}" alt="">
CSS
.bgimage {
width: 100%;
height: 100%;
object-fit:cover;
}
if you want the image to not be ugly while streching it on 100% of width
you can use object-fit property
e.g:
img{
width: //blabla
height: //blabla
object-fit:cover;
}
Also if you are using media query to change width on screen change you should not have width and height defined in inline style and I believe you know what inline styling is :d <3
Update:
Note that object-fit property is for img tag, but if you are going to use set background by using <img> tag it is bad practice you should use <div> instead with background-image:url('/images/someimage.png') property because div has much more efficent ways of manipulating background images.
Check this on the left on mentioned link, there are list of background properties
.mydiv {
background-image: url('https://wallpaperaccess.com/full/667865.jpg');
width: 100%;
height: 100%;
background-size:cover;
}
<div class="mydiv">
Placeholder
</div>
for more to know about background-size property checkout this link
First, you gave it inline code, inline code is stronger than external code so your media query code won't work for example
<div id="test" style="width: 100%; height: 100px; background-color: red;"></div>
And in css file you gave
#media screen and (max-width:700px){
#test {
background-color: black;
}
}
The result will be red background for all screen sizes because the inline code is stronger than the external code.
Try to transfer the inline code to the CSS file like this
#test {
width: 100%;
height: 100px;
background-color: red;
}
#media screen and (max-width:700px){
#test {
background-color: black;
}
}
I'm working on a work project using an interface which allows only HTML editing. Users viewing the pages I'm creating will view them from Mobile devices. The images I'm trying to place are above a paragraph. All I need is for the image to be centered.
I've created an example which looks centered on a larger screen, but moves the image slightly to the right on smaller screens. Could someone let me know what's going wrong here?
.image {
width: 382px;
height: 135px;
display: block;
margin-left: auto;
margin-right: auto;
z-index: 1;
}
<img src="image.jpg">
Edit: in my end-of-day frenzy I forgot to mention I've already assigned a class: "image".
You need to apply your styles to your image
.image {
width: 382px;
height: 135px;
display: block;
margin-left: auto;
margin-right: auto;
z-index: 1;
}
<img src="image.jpg" class="image">
When you put the dot (.) in front, it registers that as a class name. So just add a class named image to the img tag.
<img src="image.jpg" class="image">
`.center-div{
display: block;
margin-left: auto;
margin-right: auto;
}`
You need #media to achieve this. media will change css style based on screen size. by the way either add class image to your image or just use img in css style sheet, which is not recommended to use only img because it will effect all other imgs so just use
HTML:
<img class="image" src="...">
CSS:
//you can change min-width and max-width based on your desires
#media (min-width: 1px) and (max-width: 767px) {
.image {
text-align: center
//you can add any other style in here
}
}
I'm fairly new to coding and need help.
I'm creating a responsive site and I am stuck with the header image. On desktop, it looks fine. When I go to mobile, I like the size of it but the image breaks out of the container and shows a horizontal scroll bar. I tried (overflow-x: hidden;) which did the job of hiding the scrollbar but it ended up messing up the image in mobile view.
I then gave the image container a width of 100% and it fits perfectly onto the screen with no horizontal bar, but the image is way too small.
I was wondering how I can get the image to stay the same but fit into the container?
I attached an image to further explain what I'm talking about. Thanks!
You can use srcset html code. It is pretty simple.
<img srcset="image.jpg 320w, image.jpg 480w, image.jpg 800w"
sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
src="image.jpg" alt="Image">
if you are using background image then use these css rules to keep consistent for all images
div {
overflow-x: hidden;
}
div.img {
background-position: center; // or give top center based on your need
}
I think left: -50% may help center the image:
/* the div outside */
.mobile {
border: 1px solid black;
width: 500px; /*size of the mobile screen*/
height:1500px;
overflow-x: hidden;
}
/* bottle img */
.bottle{
left: -50%;
max-height: 100%;
overflow: hidden;
position: relative;
background-position: center;
}
effect in my test:
And the source for more reference:
Center a large image of unknown size inside a smaller div with overflow hidden