I have created this page and it is working fine, I'm having issue regarding the resizing, when I do resize the browser my page cropped and couldn't scroll to reach it. This is my HTML Code
<body id="page-top">
<style type="text/css">
#media (min-width:1500px) {
.new_bg {
background-image: url(img/bg2000.png);
background-size: cover;
background-repeat: no-repeat;
min-height: 50%;
}
}
in my CSS code:
html,body {
width: 100%;
height: 100%;}
Apologize if I didn't catch the needed portion of code, you may refer for the page to try, thanks.
UPDATE
]2
In you page CSS,
#media only screen and (orientation:portrait){
header{
display:none;
}
}
This is causing your page to go invisible when you resize your window. When you start resizing your window, at some width and height, the orientation is becoming as portrait and whole page is set to display:none.
Based on your question, I feel like, you don't need that style, as your query was like you are unable to find the content on resize.
Update
Your .header-content style is having -webkit-transform:TranslateY() and transform:translateY().
This is making your content to move up and making your page start position outside the browser view. Please remove these two.
Your header-content is having padding values, making your main content to move some pixels to the right. This is causing overflow. Please remove this as well.
#media (max-width:1500px) {
.new_bg {
background-image: url(img/bg2000.png);
background-size: cover;
background-repeat: no-repeat;
min-height: 50%;
}
}
change min width to max width try thiss...
Related
Struggled for a solution the first time so I am posting again with more info. Thanks in advance for your feedback.
On the website I am building at the moment I have 2 background images set to 2 different divs but they need to line up perfectly on all devices.
At the moment the background images line up at 1920px wide and smaller but once you start going larger than that it starts shifting.
Please could someone help?
Please see an image here that it should resemble
.productTopSection {
background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-about-image.jpg") no-repeat center;
min-height: 895px;
background-size: auto 100%, cover;
}
.mc-key-points {
background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-key-points-image.jpg") no-repeat center;
min-height: 895px;
background-size: auto 100%, cover;
}
#media only screen and (min-width: 1921px) {
.productTopSection {
background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-about-image.jpg") no-repeat center center;
min-height: 895px;
background-size: cover;
}
.mc-key-points {
background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-key-points-image.jpg") no-repeat center center;
min-height: 895px;
background-size: cover;
}
}
#media only screen and (max-width: 1200px) {
.productTopSection {
background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-about-image-mobile.jpg") no-repeat center center;
background-size: cover;
}
.mc-key-points {
background: none;
}
}
<div class="productTopSection g-py-200">
<!-- Content Goes Here -->
</div>
<div class="mc-key-points g-py-200">
<!-- Content Goes Here -->
</div>
#media only screen and (max-width: 767px)
.productTopSection {
background-size: cover;
height: 200px;
min-height: auto;
}
since then there is no content i think the above is the way.correct me if i'm wrong
Your example does not work, well, it doesn't matter, I'll try to understand you
First he trumpets to understand how it works
The blue frame is your div in full screen mode (one element for the whole page)
since the div has no height, you give it a min-height or fixed height (height property) in your case it works the same with only a background and until you put something in the div
At this stage, you need to understand that the height you specify does not affect the height of the image itself, that is, the min-height will not change until you put a lot of text in it (this is just an example, you can put whatever you want that has a height)
In the image I have demonstrated the background-size property with 100% auto value.
from the documentation we see that we set 100% width and leave the height on auto also by default the bakcground-image has the same position (background-poistion: 0% 0%)
If you write it all like this:
background-size: 100% auto;
background-position: 0 0; // this is not required as this is the default, I am just using this as an example
we will get the result as in the picture above, where the picture will be stretched in width relative to the screen
well now we reduce the width of screen (div automatically starts changing width and taking the width of the screen)
what do we see? there is an empty space below! In your case you set the height to 100% and the width automatically
background-size: auto 100%;
and yes, you shouldn't use multiple background image syntax in your case
background-size: auto 100%, cover; // you have one background image
This is what your non-working result looks like:
Note that I can see that you are using center positioning, so you have two holes! With what I congratulate you!
What should you do? You must use an image (html img tag) instead of a background
Example:
<img aria-hidden="true" class="bg-fix" src="https://i.picsum.photos/id/767/1200/800.jpg?hmac=lGBpi_Bt_UPPi17TX-TUBQitEe14QlbeSJ-GYhwZBvw" alt="">
<style>
img {
display: block; // Remove inline native space
width: 100%;
}
</style>
or use media to control the div's height (use vh instead of pixels or css media queries)
<style>
div {
/*.....*/
-webkit-background-size: 100% auto;
background-size: 100% auto;
min-height: 60vh;
}
/* OR */
div {
/*....*/
min-height: 875px;
}
#media screen and (max-width: 1024px) {
div {
min-height: 500px;
}
}
</style>
While it's not clear to me if you were planning to crop the image sides on mobile, I think this may help out at least - for something like this I think you can make it much easier by using an <img> tag in HTML instead of background-image in CSS.
The problem is getting the height to scale proportionally to the width so that the images retain their aspect ratio. What's happening in your code is the height is effectively being set to 895px with the min-height, it will not go higher unless you add enough content to the div.
So starting with mobile screens, your height is still 895px and the sides of the images will be cropped less and less until you reach 1920px in width (the image width). Once you go over this the image will start to stretch wider to cover and the top/bottom will start to be cropped. That top/bottom cropping while the images are centered is what causing the edges in the image to not line up. Because you're now lining up say 20% up on the top image to 20% down on the bottom one when you planned for 0% to line up.
So how does the <img> tag make this easier?
It adds content width/height to your container and allows the container to expand to fit the content, or force the content to shrink to fit in it. if you just throw an img in a div you'll see it expands the div out to the dimensions of the img.
But if you set the width to 100% on both the container and the img, it will fill the width of the container. The key being that the height will be proportionally set to maintain the aspect ratio and the div will expand in height to fit the img height needed and you will not have any top/bottom cropping so edges will line up.
Then you just need an absolute positioned container over the img to put your text content wherever you want.
If you were trying to crop the image sizes on small screens (which I think would look better). I'd suggest you use media queries there just to set some breakpoints where maybe the image is 120% width on phones and center - you'll still have that height though so if it's too high and you need to crop to bring the height down, I do have an idea for that but don't want to scope creep too much...
Here's an example with <img> - much less going on here and more straightforward IMO. And you gain more control - you can tweak this a lot to crop however you want at different media queries.
.productTopSection, .mc-key-points {
position: relative;
width: 100%;
}
.responsive-img {
width: 100%;
}
.overlay-content {
position: absolute;
/* just to get started with the content positioning */
top: 50%;
transform: translateY(-50%)
}
<div class="productTopSection g-py-200">
<img class="responsive-img" src="http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-about-image.jpg">
<div class="overlay-content">
Content Goes Here!
</div>
</div>
<div class="mc-key-points g-py-200">
<img class="responsive-img" src="http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-key-points-image.jpg">
<div class="overlay-content">
Content Goes Here!
</div>
</div>
I am currently developing the footer of a web page in HTML / CSS. This footer will contain a lot of elements (address, links, buttons, ...) and it must, therefore, be responsive. Consequently, on a desktop version, we have all the footer's elements on a row and, then on mobile we have all the footer's elements on a column (as the following images show you);
My goal is to get the result below on a widescreen (desktop):
And here is the result I want to achieve on a mobile screen:
As you can see, we must have a zoom effect when resizing the page of a browser or when we pass on a smartphone screen. I have a lot of elements to insert in the footer so the image must be zoomed to integrate them all.
Here is the code I have done so far.
.footer {
height: 639px;
background: url("https://nsa40.casimages.com/img/2020/07/11/200711012945662645.png");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
<div class="footer"></div>
The result is almost what I want but the problem is that the height of the footer does not change, and therefore I do not have enough space to put all my elements in the footer in the mobile version.
Thank you :)
Try adding height: auto, padding-top, padding-bottom in a media query for phone. You may have to experiment with the padding values a few times to make it look good. Also change the background-position so the curve can be seen on mobile phones. It will look something like this.
#media (max-width: 991.98px){
.footer{
height: auto;
padding: 50px 0;
background-position: center top;
}
}
#media screen and (min-width: 480px) { //480px is breakpoint you can adjust according to your need
.footer {
height: auto;
background: url("https://nsa40.casimages.com/img/2020/07/11/200711012945662645.png");
background-position: center top; //adjust according to you need
background-repeat: no-repeat;
background-size: cover;
padding-top: 3rem; //adjust according to your need
padding-bottom:3rem; //adjust according to your need
padding-left:inherit;
padding-right:inherit;
}
}
<div class="footer"></div>
I only want to add an image (size 1920x1080) in my html for my 1920x1080 screen. The thing is that if I see my web in full screen (F11) it works perfect, but if I see it normally (with the OS' window, browser's bookmarks, etc.) it cuts the image's height. The CSS code used is the following:
html,body{
margin:0;
padding:0;
height:100%;
overflow: hidden;
background-image: url("image.jpg");
background-color: white;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Is there any way to get the image perfectly without full screen? Or to know how much height it takes my window and browser? Because, if not, then other people with the same monitor screen size, but with different browsers and OS, could have different results.
background-size: auto auto;
This will preserve the original size (and will be clipped at the edge). "Cover" always resizes the image to cover the container.
Alternatively, you can check the user's screen size and resize the background accordingly.
html, body {
background-size: auto auto;
}
#media only screen and (max-height: 720px) {
html, body {
background size: 1280px 720px;
}
}
#media only screen and (max-height: 480px) {
html, body {
background size: 800px 480px;
}
}
etc.
You can also give the container a "min-height" or a "min-width" in css so the picture won't be cut even if the screen size a bit smaller than what you specified.
Example:
#media only screen and (max-height: 480px) {
html, body {
background size: 800px 480px;
min-width: 800px;
min-height: 480px;
}
}
I check different webs to see the effect I described. In all I found there is a cropping effect because of the window of the browser (in the height of the image). Instead of full 1080px height we usually see images cropped in height. So I guess that it is inevitable to crop it a little bit if we don't visit the web in full-screen.
One mini-solution is to decide where should crop it (background-position: center top; crops the bottom part). Other is to make the web with a margin at top (not advised for people visiting with other methods: mobile, full screen, etc.)
The style that maybe can do what you want is background-size: auto 100%;, so it take the height of the browser to the size of the background, maintaining the proportion width.
Try to use this styles, so the image height is always the height of your browser. The bad part is that the image if it doesn't have a big width, it can have white lines at the sides.
html {
height: 100%;
background: url("image.jpg");
background-color: white;
background-position: center;
background-repeat: no-repeat;
background-size: auto 100%;
}
I have few pages where I have included a background image with width 100% and height 100% in every page. That means whenever a page is loaded you'll see an image with 100% screen's size. Everything is perfect when I see these pages in my laptop. I'm facing problems when I view them in mobile screens.
I just want to know how do everyone deal in these situations. I mean how to make changes to my main div with width and height 100% in responsive screens?
The image is getting stretched if I set the background size to 100%.
Some part of the image is cut if I set the background size to contain.
I want the image's clarity should be perfect. Should I make the width of the main div to auto? Or else should I change the image in responsive screens?
Is there anyway to make this div look better in small screens?
I just want my main div to be apt in Responsive screens.
It shouldn't look line there is a defect in the image or in my code.
Here's my code of the main div :
html,
body {
width: 100%;
height: 100%;
}
.main-div {
width: 100%;
height: 100%;
background-image: url('http://vignette4.wikia.nocookie.net/marveldatabase/images/8/8c/Wolverine_Vol_3_73_Variant_Frame_Textless.jpg/revision/latest?cb=20090925123509');
}
<div class="main-div">
</div>
There are many options to make image responsive. Please Google out the approach that best suits your requirement. The solution which you will find helpful depends on the image that you are using. It depends on the size and quality of image.
I find the following links helpful.
https://www.w3schools.com/css/css_rwd_images.asp
https://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp
For Responsive Image
.class_name{
max-width: 100%,
height: auto,
display:block
}
And Full Screen Responsive Image use individual class like
.class_name{
background-image: url(image path) ;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #999;
}
html,
body {
max-width: 2000px;
min-width: 100px;
height: auto;
}
.main-div {
width: 100%;
height: 100%;
background-image: url('http://vignette4.wikia.nocookie.net/marveldatabase/images/8/8c/Wolverine_Vol_3_73_Variant_Frame_Textless.jpg/revision/latest?cb=20090925123509');
}
<div class="main-div">
</div>
this should make it responsive. I don't know what you want the DIV to be like, so I left that alone.
I'm new to responsive design and CSS. It seems like a simple question but I can't get a straight answer from Google. I have tried http://css-tricks.com/centering-in-the-unknown/ The ghost block works perfectly but it leaves me a white background colour. Now I'm stuck. Basically, I have a logo size 534x385 and I want this logo to be centered on any devices. In the case of mobile phones I would like this logo to shrink to match the screen size as well.
<div>
<img class="logo" src="images/shapes-logo.png" />
</div>
.logo {
position: fixed;
top:15%;
left: 50%;
margin-left: -267px;
}
html {
background: url('../images/shapes-background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Here's my CSS so far. But if I do this the margin-left: -267px will cause problems in mobile devices.
Resizing the Object
To change the CSS property when the screen resizes, you can use
element {
width: 100%;
height: 100%
}
You can specify your own values too to make them work. This way, everytime the screen shrinks the object or element gets smaller.
Other way, to get the mobile and tablets to get to work is the usage of CSS3 (Media Query)
Like this:
#media only screen and (max-width: 400px) {
/* here comes the trick..this is the css, which would be applied to all
* the devices whose screen has a max-width of 400px..
*/
}
You can then set some properties for it, lets say you can change the image width to
img#logo {
width: 50px;
}
So that, for smaller size screens the image width is just 50px.
Note that, this is also applied if the browser on desktop gets a width of 400px! This way, if the browser gets resized down to 400px width, the image will shrink to fit the place. In other words. Media Query is the best option to change the CSS properties depending on screen sizes. And again, you can use width: 100%.
To make the percentage thing work, you should use a container, such as div This way, the img will inherit the width of div and fill it. For example, if the div that wraps the image has 400px width, the image with width: 100% will have a width of 400% and so on.
Centering the Object
The best method to center the object is to use margins. But not custom ones, but the browse generated.
Lets say, you want to align some image in the center of the page horizontaly, you can achieve that using max-width: 100px and margin: 0 auto. Like this:
img#id {
max-width: 200px;
margin: 0 auto; no vertical margin, auto horizontal margin
}
This way, the object will be placed in the center and the browser will automatically generate the margins for it. The max-width is to make sure, that it takes just the space it needs to. I created a site a fews days ago, you can check the image at the end of the page here: http://www.aceinternationals.com
You will see the image was never provided any code that has to be kept in mind, it is just max-width and margin. So when ever you use the browser resize function, the image will always come to the center.
White background
White background might be because of the image's bckground color, or the background-color of the body! That might be inherited by the user agent (browser). I am not sure, why that happened! Sorry :)
Reference:
http://css-tricks.com/css-media-queries/
Good luck :)
My opinion is to add addition class with logo in html.
like:--
<p class="classname"><div class="logo"><img /></div></p>
.classname{ text-align:center; width:100%; }
This will always keep your logo in center.
if it won't solve. use these with above css.
margin-left:auto;
margin-right:auto;
And also add:
.logo{ max-width:100%;}
.logo {
width:33%;
background: url('your_logo.png');
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
your container:
html {
margin:auto;
}
You can try doing something like this. If you post a link I can better help you.
You should simply use max-width:100% for your image. It will keep the image responsive.