I have a web page which I'd like to set full screen image right when users enter the page. I don't want it to be fixed or anything. Just at the size of the window.
Now, I also have a footer which is positioned absolutely at the bottom of the web page. Here is the styles for the footer:
html {
height: 100%;
box-sizing: border-box;
}
body {
position: relative;
margin: 0;
min-height: 100%;
padding-bottom: 80px;
color: white;
background: white;
font-family: "Quicksand";
fill: currentColor;
}
/* Footer Section */
footer {
display: flex;
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 80px;
align-items: center;
justify-content: center;
background-color: $accent-color;
color: #fff;
}
Now, when I try to set my full screen image like this:
.fullscreen-bg {
height: 100%;
background-image: url("/assets/images/scorpion.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
The image doesn't show at all, but when I change min-height: 100% to height: 100%, The image suddenly shows up, but the footer now is at the bottom of the viewport, not the page. Here is an image that will explain this perfectly:
https://i.gyazo.com/d47e2e1fcdeaf4f8f8cab8b847c00f43.png
As you can see, the footer now jumps up and resides at the bottom of the screen.
If I change this attribute back to min-height: 100%, the image doesn't show at all:
https://i.gyazo.com/b3d8b941222ac16455d220f25da8bfbf.png
How can I fix this? I want the image to be full screen but also I don't want the footer to jump up from the bottom of the page. How can I combine these 2 behaviors?
Use height: 100vh; it will cover 100% height for all screen sizes.
Related
I'm trying to add a stylish "wave" element to the top of a div, however with my attempts, the svg moves from its position and leaves a gap when the browser resizes.
Here's a mockup of what it should look like:
CSS:
.wave {
position: absolute;
top: -72px;
}
.container {
background: #eee;
}
.col-1 {
height: 200px;
}
.col-2 {
position: relative;
background: #fff;
height: 100px;
width: 100%;
margin-top: 100px;
}
My other attempt was using background-image: url(wave.svg); in a :after selector, but same results.
Here's a codepen:
https://codepen.io/anon/pen/LmRyLK
How can I get the wave to keep put as is when it's resizing and when it's not?
Set your SVG as a background image on the element where you have your funky purple bit, you can stack the background images on each other, like so:
.purpleElement{
background: url("/path/to/asset/image.svg") bottom center no-repeat, purple;
background-size: 100%;
/*I've set a height here to replicate content*/
height: 70vh;
width: 100%;
}
I've forked off your codepen to show what will happen
I have a background image for the first section of my site that I need to touch the nav bar. The arm is the background image. It needs to touch the nav bar for the design.
background image
The first section starts with a header (h3) which has padding-top on it:
h3 {
font-size: 1.5em;
margin-top: 3em;
margin-bottom: 0.7em;
text-transform: uppercase; }
I need the background to "ignore" the padding so theres no gap between it and the navbar.
the CSS for the background image
.start {
background-image: url(../images/goldenarmamend.png);
background-position: top right;
height: 100%;
width: 100%;
Hope this makes sense!
remove background position...
.start {
background-image: url(../images/goldenarmamend.png);
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 100%;
}
set right value as per your need in pixel or em.
Here is my code:
#my_div:before
{
/* displaying the image */
content: url("img path");
/* centering the image */
display: block;
text-align: center;
/* making the image responsive */
max-width: 100%;
}
<div id="my_div"></div>
I'm trying to make the image responsive through the max-width:100% property but it is not working
My Question: Is it possible to do such a thing?
Edit
The question is not a duplicate, I want the dimensions to scale automatically on screen resize while the other question sets a fixed size to the image
Try this:
#my_div:before
{
/* displaying the image */
content: url("img path");
/* centering the image */
display: block;
text-align: center;
/* making the image responsive */
max-width: 100%;
height: auto;
}
If this doesn't work, try removing the :before pseudo-element
#my_div
{
/* displaying the image */
content: url("img path");
/* centering the image */
display: block;
text-align: center;
/* making the image responsive */
max-width: 100%;
height: auto;
}
Without seeing the context of your html, this is the best solution I can offer. We'll need more information in order to understand your situation better.
I confess I'm not entirely sure what effect you are after but I think this might be a better option for you.
Don't put the image in the content property...make that pseudo-element 100% size of the div and use a background image.
A couple of options for you.
.my_div {
position: relative;
height: 150px;
border: 1px solid grey;
width: 75%;
margin: 1em auto;
}
.my_div:before {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
content: '';
background-image: url(http://lorempixel.com/g/400/200/);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.cover:before {
background-size: contain;
}
<div class="my_div"></div>
<div class="my_div cover"></div>
JSfiddle Demo
I'm making my first site and I'm having an issue with some buttons I've created. They are three divs within another div, and horizontally aligned. Here's the html:
<div class="buttons">
<div id="next-event"></div>
<div id="blog"></div>
<div id="about"></div>
</div>
Here's the CSS:
.buttons {
height: 200px;
}
#next-event, #about, #blog {
width: 155px;
padding-bottom: 30px;
}
#blog {
margin-right: 125px;
float: right;
height: 155px;
background: url(assets/blog.png) no-repeat;
}
#blog:hover {
background-position: -155px 0px;
}
#next-event {
margin-left: 125px;
float: left;
height: 155px;
background: url(assets/next-event.png) no-repeat;
}
#next-event:hover {
background-position: -155px 0px;
}
#about {
display: inline-block;
width: 95px;
height: 155px;
background: url(assets/about.png) no-repeat;
}
#about:hover {
background-position: -155px 0px;
}
I'm having problems when I resize the window in and out, as you can see at the site: http://madeitseries.com/
For scrolling in, how to I set it so the containing div for the yellow buttons gets longer only when the window is below a certain width?
And for scrolling out, how do I set it so the yellow buttons distribution only spreads to a certain point?
Thanks so much!
So to position the buttons, you could use a grid: http://youtu.be/0IrWRuEyXYA
Or you could use a media query to change the styles once the screen gets to a certain size so they don't overlap each other
Edit: Here's a link to the fiddle with the media query and it working properly as I imagine you want it to. I've removed the floats and margins, set the .buttons div to be the width of the buttons, set .buttons height to auto, and centred them using margin: 0 auto; http://jsfiddle.net/W6B2L/
#media screen and (max-width: 770px) {
#about {
display: block;
}
.buttons {
height: auto;
width: 185px;
margin: 0 auto;
}
#blog {
margin-right: 0px;
float: none;
}
#next-event {
margin-left: 0px;
float: none;
}
}
set the height of the buttons div to auto
if you want the buttons to resize according to the width of the screen, give them each a width of 33.33%.
Why can't you use css media query like below,
#media (max-width: 740px)
{
.buttons div
{
height: 100px !important;
width: 100px !important;
background-size: 200% !important;
padding: 0 !important;
}
}
Just copy this code into your css file.. when your webpage shrinks(resize) below 740px, then your images automatically resized as per the below code.. Like that you can customize your own codes for your desired screen resolution...
Note: Just use this code in your web page.. It might works.. And you need to customize for the hover state only..
I am having problems with a site's header displaying correctly when a person zooms in with the browser. The banner will cut off on the right side and show the body background image. The address to the site is: http://www.bemidjisportsonline.com, Any ideas on a way to fix this? Thanks. I will post my CSS for the body, header, and banner elements below. A screenshot of what I am talking about can be found here: http://prntscr.com/19e59r.
body{
font: 100%/1.25 Arial, Helvetica, sans-serif;
/*background: url(/_images/background-repeated.png) top center repeat-x;*/
background: url(/_images/background_jersey_green.jpg) #010101 top center repeat-x;
}
header, nav, section, article, aside, footer {display:block;}
header{
width:100%;
position: relative;
background: url(/_images/header_trees.png) no-repeat;
background-size: 100% auto;
height: 7em;
}
#banner{
z-index:100002;
margin: 0 auto;
width:75em;
height:7em;
}
You need to change the background-size. Like this:
header {
width: 100%;
position: relative;
background: url(/_images/header_trees.png) no-repeat;
background-size: 100% 100%;
height: 7em;
}
Try changing the #banner width to 100%.
#banner {
z-index: 100002;
margin: 0 auto;
width: 100%;
height: 7em;
}