I'd like to have a image on my front page on a new site cover up the total width and make it change size depending on your resolution, but still have it horizontally centered.
This is the site I'm working on currently: http://jonathan.ohrstrom.nu and I want the whole red part be covered with this image: http://jonathan.ohrstrom.nu/style/img/featured.jpg
How can I do this? This is the css code I have for the div I want the image in:
.featured {
background-color: red;
width: 100%;
height: 700px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
I tried this with no success:
.featured {
background-image: url(http://jonathan.ohrstrom.nu/style/img/featured.jpg) no-repeat;
width: 100%;
height: 700px;
size: cover;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
But that just didn't load the image at all. Without the no-repeat then the image covered the whole width but it repeated itself..
try make it like this
.featured {
background: url('http://jonathan.ohrstrom.nu/style/img/featured.jpg') no-repeat center center ;
background-size: cover;
z-index: 1;
}
Use background-image: url(http://jonathan.ohrstrom.nu/style/img/featured.jpg);background-size: 100% 100%;
/* GRUNDER */
body {
background-color: white;
font-family: verdana;
}
/* MENY */
.menu_wrapper {
width: 100%;
height: 70px;
background-color: rgba(45, 45, 45, .9);
left: 0;
top: 0;
position: fixed;
z-index: 99;
}
.menu_content {
width: 1000px;
margin-left: auto;
margin-right: auto;
/*background-color: red;*/
line-height: 70px;
color: #a0a0a0;
font-weight: 400;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
}
.menu_logo {
float: left;
}
.menu_links {
float: right;
}
a.menu {
color: #a0a0a0;
transition: .1s;
text-decoration: none;
}
a.menu:hover {
color: #e5a000;
}
ul.menuList {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
display: inline;
margin: 0 10px;
}
/* CONTAINER */
.container {
width: 1000px;
margin-left: auto;
margin-right: auto;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.featured {
background-image: url(http://jonathan.ohrstrom.nu/style/img/featured.jpg);
background-size: 100% 100%;
width: 100%;
height: 700px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
<html><head>
<title>Webutveckling!</title>
<!-- META TAGS -->
<meta name="description" content="En webbyrå som skapar responsiva och smarta websidor åt större och mindre företag!">
<meta name="keywords" content="webutveckling,webbyr�,svensk,stockholm,billig">
<!-- CSS LINKS
<link rel="stylesheet" href="http://jonathan.ohrstrom.nu/style/style.css"> -->
<link rel="stylesheet" href="http://jonathan.ohrstrom.nu/style/font-awesome/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,500i" rel="stylesheet"></head>
<body>
<a name="top"></a>
<!-- MENY -->
<div class="menu_wrapper">
<div class="menu_content">
<div class="menu_logo">
*LOGO HÄR*
</div>
<div class="menu_links">
<ul class="menuList">
<li>hem</li>
<li>info</li>
<li>projekt</li>
<li>Kontakt</li>
</ul>
</div>
</div>
</div>
<!-- WELCOME-BILD -->
<div class="featured"></div>
<div class="container">
</div>
<a name="about"></a>
<!-- jQuery -->
<script src="http://jonathan.ohrstrom.nu/js/jquery.js"></script>
<script>
$('a').click(function(){
$('html, body').animate({
scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
}, 500);
return false;
});
</script>
</body></html>
Here's what I suggest you:
.featured {
background-image: url(http://jonathan.ohrstrom.nu/style/img/featured.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
width: 100%;
height: 700px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
You can do a lot with the CSS background property:
Set a color with Hex of RGB.
Set a image with url() or the single property background-image.
Center the image horizontally and vertically with percentage or top/center/bottom attributes. You can also set it with the property background-position.
You can also set the repeat of the image with the attributes repeat/no-repeat. It also has it's own property: background-repeat.
Set the size of the image with a value or the property background-size. You can also use this property to scale the image in the container like you want with the property cover or contain.
You can do a lot more, see this link for more information on background.
Related
I am trying to create a relatively simple classroom-like site with overlaying images. Basically, there are a bunch of pictures you can interact with that will take you to different websites with different resources. I am struggling immensely with getting the sizing and proportions of all the images correct. I want there to be a background image that stretches to span the entire page and then carefully placed images/text over the background image/other images. As you can tell, when resizing the JSFiddle, everything gets disproportionate.
A more concrete example of what I'm trying to do: You can see the text over the "chalkboard" image. I want it to appear as if the text is writing on the chalkboard so it shouldn't be moving off the blackboard when resizing the window or looking at it through different aspect ratios. I'm trying to do this with lots and lots of images so a thorough explanation would be most helpful.
JSFiddle
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(71, 71, 71);
color: white;
text-align: center;
opacity: 0.75;
}
a {
color: lightgray;
}
p {
font-family: 'Schoolbell', arial, serif;
color: white;
}
.container {
position: fixed;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
background-image: url("https://images.unsplash.com/photo-1630699376059-b781970715b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80");
background-repeat: no-repeat;
background-size: 100%;
}
#whiteboard img {
width: 40%;
position: absolute;
top: 20%;
left: 35%;
}
#chalkboard img {
width: 20%;
height: 40%;
position: absolute;
top: 2%;
left: 78%;
}
#chalkboard p {
position: absolute;
top: 10%;
left: 80%;
color: white;
font-size: 140%;
text-align: center;
}
<body>
<div class="container">
<div id="whiteboard"><img src="https://images.unsplash.com/photo-1497409988347-cbfaac2f0b12?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" /></div>
<div id="chalkboard">
<img src="https://images.unsplash.com/photo-1614292253351-4deb4913c142?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" />
<p>
Hi all!
</p>
</div>
</div>
<div class="footer">
<p>Footer Stuff</p>
</div>
</body>
// Side Note: These aren't the images I'm trying to use, just stock photo examples.
Thank you!
As you already have the positioning done in terms of % of the actual picture I think all you basically need to do is make sure that that picture's container maintains the same aspect ratio whatever the viewport aspect ratio is.
I did a rough look at your webp image and converted it to a png and took the dimensions - you will probably want to refine that to be more accurate.
Here is the snippet:
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(71, 71, 71);
color: white;
text-align: center;
opacity: 0.75;
}
a {
color: lightgray;
}
p {
font-family: 'Schoolbell', arial, serif;
color: white;
}
.container {
position: fixed;
top: 0%;
left: 0%;
/*height: 100%;*/
width: 100%;
aspect-ratio: 873 / 579;
background-image: url("https://i.stack.imgur.com/FJHjE.png");
background-repeat: no-repeat;
background-size: 100% auto;
}
#whiteboard img {
width: 40%;
position: absolute;
top: 20%;
left: 35%;
}
#chalkboard img {
width: 20%;
height: 40%;
position: absolute;
top: 2%;
left: 78%;
}
#chalkboard p {
position: absolute;
top: 10%;
left: 80%;
color: white;
font-size: 140%;
text-align: center;
}
</style>
<html>
<body>
<div class="container">
<div id="whiteboard"><img src="https://images.unsplash.com/photo-1497409988347-cbfaac2f0b12?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" /></div>
<div id="chalkboard">
<img src="https://images.unsplash.com/photo-1614292253351-4deb4913c142?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" />
<p>
Hi all!
</p>
</div>
</div>
<div class="footer">
<p>Footer Stuff</p>
</div>
</body>
</html>
Note: you will need to decide what to do about the writing - the font-size also needs to be defined in relative terms so it shrinks appropriately.
ADDITION: It's been pointed out that keeping the width always at 100vw causes cropping of the image.
Here is a snippet which 'decides' whether to make the width or the height of the classroom as much as it can be (100vw or 100vh) and adjusts the other dimension so the aspect ratio is always maintained.
<!doctype html>
<html>
<head>
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(71, 71, 71);
color: white;
text-align: center;
opacity: 0.75;
}
a {
color: lightgray;
}
p {
font-family: 'Schoolbell', arial, serif;
color: white;
}
.container {
position: fixed;
top: 0%;
left: 0%;
aspect-ratio: 873 / 579;
background-image: url("https://i.stack.imgur.com/FJHjE.png");
background-repeat: no-repeat;
background-size: 100% auto;
}
#media (min-aspect-ratio: 873/579) {
.container {
height: 100vh;
}
}
#media (max-aspect-ratio: 873/579) {
.container {
width: 100vw;
}
}
#whiteboard img {
width: 40%;
position: absolute;
top: 20%;
left: 35%;
}
#chalkboard img {
width: 20%;
height: 40%;
position: absolute;
top: 2%;
left: 78%;
}
#chalkboard p {
position: absolute;
top: 10%;
left: 80%;
color: white;
font-size: 140%;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div id="whiteboard"><img src="https://images.unsplash.com/photo-1497409988347-cbfaac2f0b12?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" /></div>
<div id="chalkboard">
<img src="https://images.unsplash.com/photo-1614292253351-4deb4913c142?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" />
<p>
Hi all!
</p>
</div>
</div>
<div class="footer">
<p>Footer Stuff</p>
</div>
</body>
</html>
I'm using an image as a full-screen background. When I put a new div underneath the content of the div gets mish-mashed with the image instead of allowing scrolling.
html {
scroll-behavior: smooth;
;
}
body {
background-color: #FBEEC1;
margin: 0;
padding: 0;
text-align: center;
}
#header {
background-image: url(tempbackground.jpg);
width: 100%;
height: 100%;
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
position: absolute;
}
#title-text {
position: absolute;
width: 500px;
height: 250px;
top: 50%;
left: 50%;
margin-left: -250px;
/* divide each margin in 1/2 */
margin-top: -125px;
}
.body-text {
display: none;
/*This will be enables after scrolling with a scroll animation */
color: #BC986A;
width: 100%;
}
.text-width {
margin: 0 auto;
width: 50%;
}
.font-title {
font-family: "Times New Roman", Times, serif;
}
.font-body {
font-family: Arial, Helvetica, sans-serif;
}
<div id="header">
<img id="title-text" src="Logo-text.png">
</div>
<div class="body-text" id="font-title">
<h2 class="text-width">Our Forests Are Under Attack!</h2>
<p class="text-width" id="font-body">Sample text that should display below image.</p>
</div>
For what i understood, you want that the page you first up see after opening your file in browser to be blank and when you scroll down you see your content.
for this make a empty container
<div class="empty-page"></div> and set its height in css file to 100 vh( viewport height ).
.empty-page {
height: 100vh;
}
<body>
<div class="empty-page"></div>
<!-- your rest of the code -->
<h1>THIS IS A HEADING</h1>
</body>
I am trying to make a parallax for the first time and am having troubles.
I'm following this tutorial and then trying to work backwards. The code isn't working however and I'm not sure where I made the mistake, I jumped around to a few other tutorials and tried to adjust the names of different divs and CSS blocks so the code is a bit messy right now.
.html {
height: 100%;
overflow: hidden;
}
.body {
max-width: 30px color: #fff;
margin: 0;
padding: 0;
perspective: 1px;
transform-style: preserve-3d;
height: 100% overflow-y: scroll;
overflow-x: "Luna"
}
header {
box-sizing: border-box;
min-height: 100vh;
padding 30vw 0 5vw;
position: relative;
transform-style: inherit;
width: 100vw;
}
header h1 {
margin-top: -100px;
}
header,
header:before {
background: 50% 50% / cover;
}
header::before {
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
display: block;
background-image: url(picture1.jpg);
background-size: cover;
transform-origin: center center 0;
transform: tranlasteZ(-1px) scale(2);
z-index: -1;
min-height: 100vh;
}
header * {
font-weight: normal;
letter-spacing: 0.2em;
text-align: center;
margin: 0;
padding: 1em 0;
}
.image1 {
background: url('img/(picture1.jpg') no-repeat center;
background-size: cover;
background-attachment: fixed;
height: 500px
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Schade's Parralax</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<p>Hi My name is schade I wrote this so I could have a test of my program.</p>
<div class="image1"> </div>
</div>
</body>
</html>
In first use a container element and add a background image to the container with a specific height. Then use the background-attachment: fixed to create the actual parallax effect.
body,
html {
height: 100%;
}
h1 {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
text-transform: uppercase;
text-align: center;
font-family: Helvetica;
font-size: 75px;
}
.parallax {
background-image: url('https://images.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
height: 100%;
/* Parallax scrolling effect */
background-attachment: fixed; // Try to remove this property
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.content {
height: 300px;
line-height: 300px;
background: #ededed;
position: relative;
z-index: 1;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="parallax"></div>
<div class="content">
<h1>content</h1>
</div>
<div class="parallax"></div>
</body>
</html>
Some mobile devices have a problem with background-attachment: fixed. You can use media queries to turn off the parallax effect:
#media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
More info about fixed property.
I have added a texture background image in html body part and it is repeating the whole body section, but I want this texture will be repeat half of the browser
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Background</title>
<style>
body{
background:url('bg.png');
}
</style>
</head>
<body>
</body>
</html>
reference image - what I want
Just use a pseudo-element on the body that is absolutely positioned.
It's 50% wide, 100% high and over 50%.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
min-height: 100%;
position: relative;
}
body:before {
content: '';
position: absolute;
left: 50%;
height: 100%;
width: 50%;
background-image: url(http://lorempixel.com/image_output/abstract-q-c-25-25-1.jpg);
z-index: -1;
}
h1 {
text-align: center;
color: red;
margin: 0;
}
<h1>My Heading</h1>
Below is the solution
Demo
HTML:
<div id="background"></div>
<div id="wrap">content area</div>
CSS:
body {
background: url('bg.png');
}
#background {
position: fixed;
top: 0px;
left: 0px;
width: 50%;
height: 100%;
background-color:#fff;
z-index: 1;
}
#wrap {
position: relative;
z-index: 2;
padding: 30px;
text-align: center;
font-weight: bold;
}
I am trying to have my background image with a transparent overlay that's split into top and bottom.
Lastnight, in SO Chat, I tried to supply the guys with a JSFiddle, but after posting the code, JSFiddle wasn't able to reproduce the layout correctly. So here's what the desired effect should look like:
(note that this is hand drawn and so you can't see a background image):
You can see that the page should be split horizontally. The blue part should be 50% high and the white part should be 50% high. With a logo in the centre. However, when I add the background image, the white section is pushed down, like this:
(note you still can't see a background image, because it's hand drawn):
Adding a background image to the html element, body element or any child container causes the white div to either be cut off at its top or pushed down, leaving a gap between the bottom edge of the blue section and the top edge of the white section.
How can I get my background image to stop affecting the flow of the document? I didn't think that CSS background images affected layout?
Here is my code:
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Home | Hmmm</title>
<link rel="stylesheet" href="~/Shared/Assets/Stylesheets/Core.css" />
<link rel="stylesheet" href="~/Shared/Assets/Stylesheets/Home.css" />
</head>
<body>
<header>
<img id="key" src="~/Shared/Assets/Images/Icons/Kdfg.png" alt="Sign In | Create an Account" />
<img id="logo" src="~/Shared/Assets/Images/Logos/JdfgWLSS.png" alt="Hmmm" />
</header>
<div id="main">
<footer>
<p style="margin-top: 100px; text-align: center; color: white;">© Hmmm 2015</p>
</footer>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
outline: none;
outline: 0;
border: none;
border: 0;
font-family: 'Segoe UI Light', Tahoma, Geneva, Verdana, sans-serif;
}
html, body
{
width: 100%;
height: 100%;
overflow: hidden;
}
body
{
width: 100%;
height: 100%;
overflow: hidden;
background-image: url('../Images/Backgrounds/JWSSB.jpg');
background-repeat: no-repeat;
background-size: cover;
}
header
{
width: 100%;
height: 50%;
background-color: #2695D7;
opacity: 0.8;
}
#main
{
width: 100%;
height: 50%;
background-color: white;
opacity: 0.8;
}
#key
{
float: right;
}
#logo
{
text-align: center;
margin: 0 auto;
position: absolute;
right: calc(100% / 2 - 176px / 2);
bottom: calc(100% / 2 - 100px / 2);
}
#sections
{
width: 100%;
height: auto;
}
.section
{
width: calc(100% / 3);
height: auto;
float: left;
text-align: center;
font-size: 10pt;
}
I have discovered a workaround. I don't understand it, but it's alright for now:
Add a border to the top of the white section:
#main
{
height: 50%;
background-color: white;
opacity: 0.8;
border-top: 0.1px solid white;
z-index: -100;
}
Then, make the logo appear on top again by changing its z-index:
#logo
{
text-align: center;
margin: 0 auto;
position: absolute;
right: calc(100% / 2 - 176px / 2);
bottom: calc(100% / 2 - 100px / 2);
z-index: 1000;
}
I am not sure if this way will be okay for you, but still. Link to jsfiddle
html:
<div class='top'></div>
<img src='http://silvercreekart.weebly.com/uploads/3/7/3/0/37300503/9869404.png' class='logo'/>
<div class='bottom'></div>
css:
html, body {
height: 100%;
width: 100%;
}
.top {
background: cyan;
height: 50%;
}
.bottom {
background: grey;
height: 50%;
}
.logo {
position: absolute;
left: 50%;
top: 50%;
margin: -128px 0 0 -128px;
}
I like my way much more then using calc. It is better way if you know sizes of your logo (to put it in the middle with negative margin)
Change your CSS to:
body {
height: 100vh
overflow: hidden;
background-image: url(...image...);
background-repeat: no-repeat;
background-size: cover;
}
#main
{
width: 100%;
height: 50%;
background-color: white;
opacity: 0.8;
display: inline-block;
}