I have made a full screen slide show on a web page I am making, but as a entry page after they are 'done' with the slide show..I want to put a picture on top with the width expanding to full size in width after the resolution to the user. While the height is gonna be static..like 600px.
Is there a way to do this? With CSS or something? I am new to CSS and after googling for many days I havent found any decent example of what I am trying to make
I do not have any example ready of what I am trying to archieve, but hopefully someone will have a idea of what I am trying to do.
Thanks in advance
You can set two different values in background-size:
.yourimg {
background-image: url('yourimghere.jpg');
background-size: 100% 600px;
}
You can try with a container like this
HTML:
<div id="boom">
plop
</div>
CSS:
#boom {
width: 100%;
height: 600px;
background: url(http://placehold.it/1600x600);
}
Result: http://jsfiddle.net/fx5jM/
This worked for me
.backgroundImage{
background-size:contain;
background-position:top center;
background-repeat: no-repeat;
height:600px;
}
Related
I'm trying to make the image on my site to display 100% height but crop width as needed. On PC the site works as intented as can be seen below:
However when I check the site with my phone it displays the whole image distorting it.
HTML:
<header class="wide">
</header>
CSS:
body, html {
height: 100%;
}
.wide {
width: 100%;
height: 100%;
background-image: url('sebastian-unrau-42537-unsplash.jpg');
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
#media (max-width: 1199.98px) {
.wide {
background-attachment: scroll;
background-position: initial;
}
}
The media query is mandatory as the image doesn't work at all if the background-image is fixed and centered.
Now if I remove "background-size: cover":
It's kind of closer what I'm after but not quite. Am i missing something?
My PC is running Chrome 66.0.3359.117 and my phone 65.0.3325.109
Ok I figured it out by accident. I was using an image from Unsplash.com and the the original resolution is 6000x4000. As I was making a Codepen project to post here I resized the image and wondered why it worked on codepen but not on my pc. Well it seems the resolution needs to be about 5500x3667 or smaller to work.
Maybe there is a limitation I did not know of but anyway got it working now. I didn't change anything else.
You could use this property :
background-size: x% y%;
The first value is the horizontal position and the second value is the vertical.
So you can try :
background-size: auto 100%;
I'm reading news on this page mostly on my mobile device:
link
The big banner right of the logo is not scaling properly on the mobile device.
So when you resize the window and make it smaller everything is resizing except the banner.
Im learning php, css and just wondering how this could be solved. Ive checked also on stackoverflow and find something like:
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */ }
I've tried this also in the dev. mode of google chrome but it desnt work.
Is this solvable with the provided data from the dev mode?
Code looks like:
<div style="position:relative;
width:728px; height:90px; z-index:10;
background-image: url(http://www.image.jpg);">
Based on your code, the banner is implemented as background image, not an IMG element. To make background image scaled so that it's entirely visible, use background-size: contain. So your user styles could be like this:
.site-header-banner > DIV {
background-size: contain;
background-repeat: no-repeat; // To disable repeating background image.
max-width: 100%;
}
You can use it as a background with the following properties:
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
https://jsfiddle.net/alexndreazevedo/xe9tvkyr/
You can define a fixed size to DIV containing image background and change it by media query.
I tried solving the problem myself, but I can't do it.
Go to my site here:
http://digesale.com/
And scroll down to the footer. Just above the footer you will see an image. It's the one that says "Get Things Done, Start Buying," etc. That's the image I have a problem with...
On my browser/resolution it looks perfectly aligned, but a friend told me that on his resolution it doesn't cover the entire space left-to-right. If you press "Ctrl+-" on your keyboard you'll see the problem.
This is the code I use to put that image there:
<img style="margin-bottom: -20px;" src="http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png" alt="Digesale - How it works!" height="300" width="1350">
Can anyone help me make that image cover the whole width of that section so that it looks good even on smaller screen resolutions?
Thank you.
If you need to cover you can use the image as a background:
<div class="background"></div>
and in the css
.background {
background: url(http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png) top left no-repeat;
background-size: cover;
width: 100%;
height: 100%;
}
The important part is background-size: cover because it fill the entire div in all cases.
EDIT
If you want another behaviour, you can use your old img tag
<img src="http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png" alt="Digesale - How it works!" class="responsive-img">
And the css
.responsive-img {
margin-bottom: -20px; /* this was writting in inline style. */
width: 100%;
height: auto;
}
Try the below CSS
.background {
background: url(http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png) top left no-repeat;
background-size: contain;
width: 100%;
height: 26vw;
}
How do I make my background image in the body not to crop when it resizes the window? The site it responsive and the image dosen't resize it juts crops off bits of it. I tried using position:fixed but it didn't work. What code do you need to help me?
This it the code for that wrapper:
.body-wrapper {
background-image: url('http://promegaekonomi.se/wp-content/uploads/2014/09/82.png') !important;
background-repeat: no-repeat;
background-size:100% auto;
}
http://jsfiddle.net/yg17acL0/
Try to use the img tag inside the div.
.responsive {
max-width: 100%;
height: auto;
}
Try this CSS: background-size:contain
Working LINK
(Updated)
I'm trying to place this picture at the background of my page in a div. I'm trying to make it full screen "in width". so the size of the picture is 980x420, but it just simply doesn't work. I know I'm missing something but I can't find it anywhere.
CSS
.Sil{
max-width: 100%;
height: 300px;
background: url(../Images/TALENT.png) no-repeat;
}
HTML
<div class="Sil"></div>
There is a possibility your image is smaller than 980px. If that's the case you can change from max-width: 100%; to become width: 100%'. Other option is to usebackground-size: cover;`
For More Information! Go and Checkout...