I would like to put below image in a responsive footer.
I would like to display the image in footer when width is 400px like below. I would like to keep the height as like previous. How can I do that ?
You can set the background to be
background: #eee url(image_path) center center;
and set max-wdith=100%, while setting the height to be a fixed px value;
see below:
#catcat {
background: #eee url(https://i.stack.imgur.com/wyc3V.jpg) center center;
max-width: 100%;
height:300px;
}
<div id=catcat></div>
Related
I want to create a header with a fixed background. So I defined the following properties:
header {
margin: 0;
padding: 0;
width: 100%;
height: 300px;
display: block;
background-image: url('...');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
Now I have the following problem. Currently, the background is centered according to the Screen Width and Height. Since the header is at the top, the actual background of the header is just the top of the image. In addition, the header image section changes every time I change the screen height, which is not my goal.
I want the image to be centered within the header (center of the image is at the center of the header, but only if I have not scrolled down). In addition, the header image section should only change if I change the header width, height or screen width but not if the screen height is changed.
You can rely on vh unit combined with some calc(). The center is initally 50vh and you want it to be 150px from the top so we need a translation of 50vh - 150px. You should also get rid of cover if you want the image to not change when the screen height change but it may not render like you want.
I replaced 300px with 100px for the demo.
.header {
height:100px;
border:1px solid;
background:
url(https://picsum.photos/id/1014/1200/800) 50% calc(50% - (50vh - 50px)) fixed;
}
.not-fixed {
background-attachment:initial;
background-position:center;
margin-top:20px;
}
body {
min-height:200vh;
margin:0;
}
<div class="header">
</div>
<div class="header not-fixed">
</div>
With the use of cover
.header {
height:100px;
border:1px solid;
background:
url(https://picsum.photos/id/1014/1200/800) 50% calc(50% - (50vh - 50px))/cover fixed;
}
.not-fixed {
background-attachment:initial;
background-position:center;
margin-top:20px;
}
body {
min-height:200vh;
margin:0;
}
<div class="header">
</div>
<div class="header not-fixed">
</div>
You can clearly see how the first image is centred exactly like the second one without fixed
To get more details about the caluclation check this: Using percentage values with background-position on a linear gradient (the section Combining pixel and percentage values)
Try to wrap the img (outside the header div) and header div and play with position relative/absolute to superimpose header on top of the image.
Having done that, you can use z-index to push image backwards
So what im trying to do is, a responsive design with multiple images that resize with each other, same size always.
In the green area, I want to have two images that span the width of the window and have the height for both auto and the max height is 300px for div 1, where as div 2 is just overflowed in the y.
The big problem I'm getting is I'm unable to use divs for both, I have to use an img tag for the second image but I want to place content within the second div tag.
Div 1 - repeating x background,
Div 2 - an image,
Inside div 2 - content
If you need any further clarification just ask, thankyou.
Edit:
The headerBackground doesn't show up as the height of 300px that I need it to, but the height needs to resize down for headerBackground the same as headerImage but it can't scale up through 300px
.headerBackground{
background-image: url('image1.png');
min-width: 100%;
height: auto;
max-height: 300px;
overflow-y: hidden;
}
.headerImage{
background-image: url('image2.png');
height: auto;
display: block;
min-width: 100%;
}
<div class="headerBackground">
<div class="headerImage">
<!-- content in here -->
</div>
</div>
You can try with:
background: url('image1.png') no-repeat center center;
background-size: cover;
It will:
Fill the entire div with the image (no white space);
Scale image as needed;
Center image in div.
Source: w3schools
.step-1-4 {
background:url('../images/gadget-4-sprite.png')
no-repeat; width:950px;
height:70px;
margin-left: 15px;
}
Above is the CSS for a div I have which holds a background-image. I have set the height and width of the div the same as the dimensions of the image. The problem i'm having is when the window is re-sized for example less than the width of the image, it gets cut off.
Is there a solution whereby I can style the CSS in such a way that the div re-sizes along with the image inside it. I have tried making the width of the div 100%, which re-sizes the div correctly, however the image still does not re-size. Maybe if this is not a good solution, then how can this be achieved using an <img> tag.
use background-size:cover; or background-size:100% 100%;
so your css will be ::
.step-1-4 {
background:url('../images/gadget-4-sprite.png') no-repeat;
background-size:100% 100%; /*..or cover ...*/
width:950px;
height:70px;
margin-left: 15px;
}
I'm having a terrible time getting an image to scale the way I'd like it to in HTML & CSS. Hope it's possible to do this… I'm developing a site that is comprised of a header, main content div and footer div. All three of these divs fall within a master wrapper div. None of the divs are absolutely positioned or fixed to the browser window. In the footer div, I am trying to set a SVG vector image as the background as I will be also inserting text into this footer div. The SVG image is 800 x 240px by default, but because SVG's are infinitely resizable, they will scale up. I would like this SVG image to stretch the width of the footer div proportionately. So, for example, when the browser is shrunk to 300px wide, the image would be 90px tall. If the browser is stretched to 1200px wide, the image would need to scale to 360px tall. The SVG should always be 100% of the browser width and it's height should be proportionately sized.
I am wanting the footer div to be at the very bottom of the browser window so that there is no white space below the background image. However, I do not want to set the footer div as fixed to the bottom of the browser window. I am wanting the footer to come after the main-content div on page scroll. So, on longer webpage posts, the footer div will not be visible until the page is scrolled down a bit and will then scroll into view.
Thanks so much for any help! I can provide more information if needed. Still learning CSS & HTML! :)
<header>This is out header</header>
<main class="content">This is my content</main>
<footer>
<div class="footer-inside">
And here goes footer with background image
</div>
</footer>
What I would do to put footer to bottom, use flexbox (it's 2015, everyone should support flexbox...),
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.content {
flex: 1;
}
then make padding hack to make footer responsive.
footer {
position: relative;
height: 0;
padding-top: 30%; /* 240 divided by 800 and multiplied by 100 */
text-align: center;
}
.footer-inside {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: red url(http://ohdoylerules.com/content/images/css3.svg) no-repeat center center;
background-size: contain;
}
Demo fiddle
First set your SVG to scale proportionally:
<svg preserveAspectRatio="xMinYMin">
</svg>
Then set it as the background of your footer and state the background size with cover:
.footer {
background: #000 url(image.svg) top left no-repeat;
background-size: cover;
}
In general to scale an SVG background image you need to set a viewbox, otherwise preserveAspectRatio will not work:
<svg
viewBox = "0 0 90 70"
preserveAspectRatio="none"
...
Then in your CSS for example:
.logo{
background:transparent url(images/matheboss-logo-w.svg) center center no-repeat;
display:block;
background-size:contain;
height:50px;
width:50px
}
I have a background that repeats and positions like this:
body
{
background-image: url(images/background.jpg);
background-repeat: repeat;
background-position: 50% 50%;
}
This works fine. Now I want to center the content of the page. If I have a image that is 1000x560px I would like it to be aligned to match the background that is now centered in the browser.
Best approach?
for you content div you can use position:absolute . write like this:
.content{
width:1000px;
height:560px;
top:50%;
margin-top:-230px;
left:50%;
margin-left:-500px
}
If you now have your centered background image applied to the body tag, you could declare a container to then sit in the center of your page like so:
#container {
width: 1000px;
height: 560px;
margin: 20% 0 auto;
}
This could create a container sitting directly over your background and will re-size depending on the size of your window. The only thing i cant work out for you is the top margin percentage, you might have to play around with this to get it correct. In this case i have declared it as 20%, also note i have only tested this in FF
Let me know how that works out and if ive understood you correctly.
Cheers