Div same size as background image - javascript

So i have a div with a background image and i would like to make the div same size as the background image when i resize the window, so i can place some text in the center of it and i want to image to be responsive and so the div also.
my html for the image and text:
<div id="headerimg" class="header">
<h1>Welcome to my website</h1>
</div>
and my cc for it so far:
#headerimg{
background: url(http://images.huffingtonpost.com/2016-06-25-1466835058-3172856-DKCWebDesignBanner.jpg) no-repeat top center fixed;
background-size: cover;
width:100%;
}
.header{
height: 700px;
width: 100%;
margin: auto;
padding: 20%;
color: white;
text-align: center;
font-size: 50px;
}
i am just using a random image from google atm, ill replace later; but anyway.. how can i get the height to align whenever? Jquery maybe? -but im not realy familiar with jquery much...and yes, i want the div to be full width of the site all the time.

Would something like the following work for you:
https://jsfiddle.net/44k0320v/
I've updated your header width to use 50vw units, your example image has an aspect ratio of arount 2:1 meaning that if you want the div to maintain the correct height you need to set the height to be half of the viewport width (the measurement across the width of the screen is 100vw).
I have also updated the background image to have a size of 100% rather than cover so it's width will scale with the div.
I've also updated the font size to also use vw units.
New css below:
#headerimg{
background: url(http://images.huffingtonpost.com/2016-06-25-1466835058-3172856-DKCWebDesignBanner.jpg) no-repeat top center fixed;
background-size: 100%;
}
.header{
box-sizing: border-box;
height: 50vw;
width: 100%;
margin: auto;
padding: 10% 20%;
color: white;
text-align: center;
font-size: 3.5vw;
}

A similar solution to jazibobs, also using the vw height but with more "flowy" text. Currently the background will respond to pretty much any width however at narrow widths it doesn't really make much sense with the text. For this you could use media queries to possibly even hide the background at smaller widths or just set the text smaller.
https://jsfiddle.net/kzhzasot/
#headerimg{
background: url(http://images.huffingtonpost.com/2016-06-25-1466835058-3172856-DKCWebDesignBanner.jpg) no-repeat top center fixed;
background-size: 100% auto;
width: 100%;
height: 100vh;
}
.header{
margin: 0px;
padding: 0;
color: white;
text-align: center;
font-size: 50px;
display: table;
}
h1 {
display: table-cell;
vertical-align: middle;
}

Related

How to keep size proportions for div's child elements

TL;DR: How to keep the div children proportional to the div itself?
I have a div, containing various elements like text, images, icons etc. It keeps 16:9 aspect ratio and fills as much viewport it can, while resizing the browser window, the div (with background different from the body background) changes size well, though the contents are staying the same size which is bad because I'm trying to make a presentation website which needs to look the same at various resolutions. How do I make the child elements align and resize properly inside the div?
I tried using viewport units though it didn't turn out really well.
My Code:
I tried using % units to set font size and then use em to scale other things but it didn't work. I also tried using only % units to set all properties but it did not work either
body {
background: black;
user-select: none;
margin: 0;
height: 100vh;
}
.container2 {
overflow: auto;
box-sizing: border-box;
resize: both;
overflow: auto;
max-width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
.presentation-place {
user-select: none;
background: white;
top: 50%;
transform: translate(0, -50%);
position: absolute;
align-items: center;
aspect-ratio: 16 / 9;
}
#media screen and (max-aspect-ratio: 16 / 9) {
.presentation-place {
width: 100vw;
}
}
#media screen and (min-aspect-ratio: 16 / 9) {
.presentation-place {
height: 100vh;
}
}
.slide {
font-size: 100%;
position: absolute;
top: 0;
bottom: 0;
margin: 0 auto;
width: 100%;
height: 100%;
overflow: hidden;
background: red;
background-position: center center;
}
.title1 {
margin-left: 1em;
font-size: 6em;
position: absolute;
margin-top: 2em;
}
<html>
<body>
<div class="container">
<div class="presentation-place">
<div class="slide s1">
<h1 class="title1">test</h1>
</div>
</div>
</div>
</body>
</html>
Make sure to avoid specific units like cm, px etc because those are fixed units no matter the scale of the site itself or the monitor, the use of Units like % since vh/vw didnt work. % scales relative to the size of the monitor or website, so this should help. Alternativly you could use aspect-ratio because it scales relative to the size of the parent element

Automatically Size a Container div to the Dimensions of an img element inside of it using only CSS?

I have a situation where I have a div container with an image inside of it. The image is a variable asset so I never know what the height and width of the image will be. I want the div container to always fit to the size of the image and then add some padding to it... so for example if the image inside is 200px by 100px then the container should stretch to be 200px by 100px and then have 30px padding around it.
Here is an example of the CSS I'm using.. (the image is meant to be centered within the div vertically and horizontally):
#container {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background: red;
border-radius: 20px;
transform: translate(120px, 54px);
padding: calc(21px/2) calc(58px/2);
}
#container:hover {
background: pink;
}
Just for reference this is the html element:
<div id="container"><img src="image.png"></div>
So far I haven't been able to find any css trick that works. I tried using "fit-content" on the container, but it seems like fit-content is more for stretching the image to fit the container, not the other way around, so I resorted to using Javascript:
var container = document.getElementById("container");
container.style.width= container.querySelector('img').offsetWidth+"px";
container.style.height= container.querySelector('img').offsetHeight+"px";
I would rather not use JavaScript if I don't need to, so please let me know if there is a simpler way of doing this...
AFAIU, Your code is working as expected without the JavaScript:
#container {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background: red;
border-radius: 20px;
transform: translate(120px, 54px);
padding: calc(21px/2) calc(58px/2);
}
#container:hover {
background: pink;
}
<div id="container">
<img src="https://picsum.photos/400">
</div>
Ok guys, I solved it...
I had this in my css:
#page img, #page div {position: absolute; border: 0;}
This was causing the image to have an absolute position which pulled it out of the document flow. Once I added position: relative to the img, it started working.
I appreciate the responses everyone. It was helpful! Thank you!
If I understand right this is what you want. No matter what size the image is the container will be 20px bigger.
#container {
float: left;
background: pink;
}
#image {
width: 500px;
height: 300px;
padding: 20px;
animation: size 5s linear infinite alternate;
}
#keyframes size {
from {width: 100px; height: auto;}
to {width:400px; height: auto;}
}
<div id="container">
<img src="https://static.toiimg.com/photo/72975551.cms" alt="pic" id="image"/>
</div>

Header banner with css only?

I'm a beginner in css and i'm trying to create a hero banner with css only and make it responsive, i'm quite confused with positioning of the texts on top of the image, if i zoom the page or resize it down the texts don't respond.
<header class="main-header">
<img src="imgs/header.jpg"/>
<div class="title">
<h1>This is a title</h1>
<p>some texts here</p>
</div>
</header>
css:
.main-header img {
max-width: 100%;
margin: 0 auto;
position: relative;
}
.title {
position: relative;
top: -450px;
left: 10%;
text-align: center;
display: inline-block;
color: white;
margin: 0 auto;
width: 80%;
text-transform: uppercase;
}
.title h1 {
font-size: 2.7rem;
font-weight: 700;
margin: 0 auto;
width: 80%;
margin-bottom: 1.5%;
}
.title p {
font-size: .60rem;
width: 33%;
margin: 0 auto;
line-height: 1.8;
}
Is it even possible to create a hero banner with css only? cuz i can't see any tutorial for that..
Example: Responsive Hero Banner with Image and Text
Here's a very minimal example of a full width, responsive hero banner with image and text, using only css.
The HTML:
<div class="hero-wrapper">
<header class="hero">
<div class="hero-sizing"></div>
<div class="hero-content">
<h1>Hero Title</h1>
<p>Hero paragraph text.</p>
</div>
</header>
</div>
The only unusual element there is the "hero-sizing" div. It's there to ensure the banners image maintains its aspect ratio at different window size (more on "hero-sizing" later).
On to the css. First is the outermost hero-wrapper class:
.hero-wrapper {
clear: both;
position: relative;
width: 100%;
text-align: center;
font: 18px helvetica, sans-serif;
color: white;
}
Nothing too confusing here, mostly just setting up some formatting. Note that width: 100% makes the banner extend the full width of the window.
Next is the hero class, which specifies the banner image and how it is displayed:
.hero {
background-image: url(http://lorempixel.com/image_output/people-q-c-1200-400-6.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center;
background-size: 100% auto;
}
This hero class specifies the image, centers it, and sets it to the full width of its container.
Next comes the hero-sizing class that's responsible for maintaining the banner's aspect ratio when it's resized:
.hero-sizing {
padding-top: 33%;
}
To maintain the image's aspect ratio, padding-top must match the image's height:width ratio. Since the image in this example is 1200 wide by 400 high, we've set padding-top to 33%. hero-sizing serves an important function -- it stretches and shrinks the height of div containing the background image, so the div's aspect ratio and the image's aspect ratio always match.
With just the above css, we now have a full-width, responsive banner image that maintains its aspect ratio, but we still would like to be able to add some text to the banner and have it look decent. That's what the hero-content class and 'hero-content:before pseudo-class are for:
.hero-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.hero-content:before {
content: ' ';
display: block;
height: 40%;
}
Our content ought to be placed at roughly the same spot over the image, regardless of the image's size. To accomplish this, we're employing a little trick with :before pseudo-class to push our content down the page by 40% of the banner's current height. This positioning 'trick' means our content's position is responsive, as it will stay at the same place over the image.
The final css just sets some formatting preferences:
.hero-content h1,
.hero-content p {
margin-top: 0px;
margin-bottom: 6px;
}
And we're done.
Granted, this is just a bare minimum example which could be improved for small screens with #media queries (like reducing the font size), but this example shows how to implement two very useful capabilities:
full width, responsive hero banner images that maintain aspect ratio
consistent content positioning over the image
.hero-wrapper {
clear: both;
position: relative;
width: 100%;
text-align: center;
font: 18px helvetica, sans-serif;
color: white;
}
.hero {
background-image: url(https://picsum.photos/id/1062/1200/400);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center;
background-size: 100% auto;
}
.hero-sizing {
padding-top: 33%;
}
.hero-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.hero-content:before {
content: ' ';
display: block;
height: 40%;
}
.hero-content h1,
.hero-content p {
margin-top: 0px;
margin-bottom: 6px;
}
body {
margin: 0;
background-color: #d0d0d0;
}
<div class="hero-wrapper">
<header class="hero">
<div class="hero-sizing"></div>
<div class="hero-content">
<h1>Hero Title</h1>
<p>Hero paragraph text.</p>
</div>
</header>
</div>

Issues getting a background image to appear

I am unsure of why I cannot get a background-image to appear in the following snippet. The url is correct and I have set size to the image. Also, how can you align a background-image in the center of a page? I know there are properties like right top, but I do not see one for center vertically and horizontally.
Thanks.
$("#arrow-icon").slideToggle(1000);
.arrow {
height: 400px;
width: 100%;
background-color: blue;
text-align: center;
}
#arrow-icon {
padding-top: 100px;
display: none;
background-image: url("http://optimumwebdesigns.com/icons/down-arrow.ico");
background-repeat: no-repeat;
height: 50px;
width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="arrow">
<div id="arrow-icon">
<!-- <img src="http://optimumwebdesigns.com/icons/down-arrow.ico"> -->
</div>
</div>
The problem is that the div is smaller that the picture.
You can get around this with the background-size property
Example:
#arrow-icon {
padding-top: 100px;
display: none;
background-image: url("http://optimumwebdesigns.com/icons/down-arrow.ico");
background-repeat: no-repeat;
height: 50px;
width: 50px;
background-size:100% 100%;
}
fiddle - https://fiddle.jshell.net/800modgt/
Or you can change the div width and height to the image width and height...
And in terms of centering, simply use:
background-position: center;
That said, I'm noticing that it's not center on the page on the Fiddle previously posts. You can use
margin:auto;
to center a <div> horizontally
You might consider for the positioning using CSS3 for positioning, as it's very versatile in changing position of a div and how far it slides out. Here is a JSFiddle. It's for side animation, but it will work for just a standard up/down, too.
https://jsbin.com/yovaqo/edit?html,css,js,output

How to align a website to the center of the screen top/bottom and right/left?

I want to have the effect like dropbox:https://www.dropbox.com/ where my website is centered in the exact middle of the page.
Achieving this effect is way more complicated than it should be. Here's a bare-bones working example: http://jsfiddle.net/JakobJingleheimer/UEsYM/
html, body { height: 100%; } // needed for vertical centre
html { width: 100%; } // needed for horizontal centre
body {
display: table; // needed for vertical centre
margin: 0 auto; // needed for horizontal centre
width: 50%; // needed for horizontal centre
}
.main-container {
background-color: #eee;
display: table-cell; // needed for vertical centre
height: 100%; // needed for vertical centre
// overflow: auto; // <- probably a good idea
vertical-align: middle; // needed for vertical centre
width: 100%; // needed for horizontal centre
}
.container {
background-color: #ccc;
padding: 20px;
}
If you want to achieve this:
Here are different methods, with the pros/cons of each one, for centering a page vertically. Choose which one you prefer:
http://blog.themeforest.net/tutorials/vertical-centering-with-css/
EDIT. As suggested, I will proceed to explain one of the methods. It only works if you already know the height/width of the element to center (the link includes more methods). Assuming all your content is within <body>, and that your content is 900px x 600px, you can do in your css:
html {
width: 100%;
height: 100%;
}
body {
width: 900px;
height: 600px;
position: absolute;
top: 50%;
margin-top: -300px; /* Half of the height of your body */
}
However, this falls short for dynamically generated content, since you don't know the height of it. I've used it succesfully on log-in box pop-up and settings pop-up.
Another method I've used in the past for the whole page is the Method 1 from the link. It makes a set of divs to behave as a table, which can vertical-align to the middle.
If you want to align it vertically center, please check this web page: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
If you know the width and height of your page
then wrap your contents in following div css
.center
{
position:absolute;
top:50%;
left:50%;
margin-left: -(yourPageWidth/2);
margin-top: -(YourPageHeight/2);
}
On your topmost div give margin:0 auto 0 auto; Also define some width to that div.
First create a main container of the desired width and then put all your code inside the main container. For Eg.
<body>
<div id="container">
......... your code
</div>
</body>
And in the css
#container{
width: 700px ;
margin-left: auto ;
margin-right: auto ;
}
You can change the width as per your needs
<body>
<div class="container">
......... your code
</div>
</body>
#container{
width: 700px ;
margin:0 auto ;
padding:0px;
}
Try this:
html
<span id="forceValign"></span><!--
--><div id="centerMiddleWrap">
<div id="centered">Hello this is some text. Hello this is some text. Hello this is some text.</div>
</div>
CSS
html {
height: 100%;
background: #eee;
}
body {
margin: 0;
height: 100%;
/*important*/
text-align: center;
}
#centerMiddleWrap {
/*important*/
display: inline-block;
vertical-align: middle;
}
#forceValign {
/*important*/
height: 100%;
display: inline-block;
vertical-align: middle;
}
#centered {
background: #000;
color: #fff;
font-size: 34px;
padding: 15px;
max-width: 50%;
/*important*/
display: inline-block;
}
Here is an demo
Wrap a div and define its width, use margin:0 auto for centering the div.
You can check a site's CSS by using Firebug or browser extensions.

Categories