I have this CSS style here, but it spans across the whole screen rather than just repeating it within the 960px width of the body.
body
{
width:960px;
margin: 10px auto 10px auto;
background-image:url(logo.png),url(backgroundimage.jpg);
background-position: top center, top center;
background-repeat: no-repeat, repeat-x;
background-attachment: static;
}
logo.png is just an image of a company logo, while backgroundimage.jpg is something I want to span only within the 960px rather than across the whole page. How can I do this?
You will need to make a container class. This class will hold all inner div classes and content.
The code for this will be as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.container{
width: 960px;
background: url("logo.jpg");
height: 700px;
}
</style>
<body>
<div class="container">
</div>
</body>
</html>
An easier way to do this would be to use bootstrap. The Bootstrap framework provides a .container class premade with custom responsiveness built in.
Related
This is what is happening with the code.
Here is the code...
<div style="background-image: url(img/background.jpg);background-repeat: no-repeat; height:250px;"></div>
The size of the image is 963w x 200h.
At the end of the day, i would want this to be 100% width, but also be responsive for all devices. How can I make that happen?
adding background-size:cover; wont do that trick.
Here is a fiddle: https://jsfiddle.net/t7ekj0mh/
Add the rule background-size: contain to your div.
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
<body>
<div style="background-image: url(https://i.ibb.co/2jCzQB6/background2.jpg);background-repeat: no-repeat; background-size: contain; height:250px;"></div>
</body>
</html>
Add background size contain for the image to scale horizontally
As I understand, this is what you are attempting to achieve.
div{
background: #E6DCDD url(https://i.ibb.co/2jCzQB6/background2.jpg) center bottom / contain no-repeat;
height: 300px;
border: 5px dashed red;
}
<div></div>
This will stretch the image horizontally and place it at the bottom, and by adding a color, it will seem as it is a one-piece thing.
Been writing code for the background of a website. The goals are 1) 100% height of the browser window for the first image 2) image stays centered in window and sides are cut off 3) on the home page there is also two additional images that need to have the same effect. Been trying and writing different code chunks and not getting anywhere. I can get one part which just breaks another. Thank you for any assistnaceCurrent code chunk is as follows:
<html>
<head>
<meta charset="UTF-8">
<title>Background Image</title>
<style>
* { margin: 0; padding: 0; }
.background {
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
<div class="background">
<img src="images/bg.png">
</div>
<div class="background bg2">
<img src="images/bg2.png">
</div>
</body>
</html>
Not sure if I fully understand what your question is but for your image to get the height of the window you need to
.background {
background-image: url(images/bg.png);
height: 100vh;
}
That way the background image will always use the full height of the viewport. Not sure about the rest of the question tho!
If I understand what you are trying to do, there are a few things with your code that is wrong. First I will explain a couple of things and then I'll provide the code that I came up with that works when I tested it. Here goes...
First, in your style element, where you have ".background:", you don't need any of the code that you wrote. The stuff that mentions webkit, moz, etc. is really for stuff that may have cross browser compatibility problems. background-size is not one of those things you would have to worry about with that. The only thing I would put in your "background" class is width and height of 100%.
Second, speaking of width and height, I would include and "html" and "body" element and give them both a width and height of 100%.
Third, you are trying to have your images listed in your html, but you are trying to style them as if you are having your css produce them. Notice how in my html I left the "background" divs empty and then included the url of the photos in the css.
In a nutshell, I believe you may be a little confused as to what method should be used and when/where, because you are actually fusing different approaches together. That said, here is the code I wrote...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Background Image</title>
<style>
* { margin: 0; padding: 0; }
html, body {
width: 100%;
height: 100%;
}
.background {
width: 100%;
height: 100%;
}
#bg1 {
background: url(images/bg.png) no-repeat center;
background-size: cover;
}
#bg2 {
background: url(images/bg2.pngg) no-repeat center;
background-size: cover;
}
</style>
</head>
<body>
<div class="background" id="bg1">
</div>
<div class="background" id="bg2">
</div>
</body>
</html>
Here is a link that may help you too. They have great directions, exercises and tutorials: w3schools.com
Hope all of that helps Zack! :)
I'm working on a project where I have a hero image as a background-image for my html headertag.
Directly below that I have a flex container with two items in that space themselves throughout the viewport window and resize according to the viewport size. This looks fine when the browser window is at a large viewport size, however, when I start scaling the window down, there begins to show a bit of whitespace between the hero image and the flex container. I would like that flex container to always stay directly at the bottom of the hero image.
I realize that this is probably because the hero image has a fixed height on it and is not flexible because it is always going to be trying to render the height at 700px regardless of the viewport size.
I also know that you can resize this based on breakpoints in your CSS, but I just wanted to see if there was another way to do it.
I have attached screenshots so you can have an accurate read of what it is that I am asking
Here is my viewport window at a large size: http://i.imgur.com/J81b7OO.jpg
Here is my viewport window at a slightly smaller size: http://i.imgur.com/CfjAyZG.jpg
For further clarification:
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type = "text/css" href="css/normalize.css">
<link rel="stylesheet" href="css/build/main.css">
<title>Summer Breeze</title>
</head>
<body>
<header class = "hero">
</header>
<div class = "container">
<div id = "stay">
<div id = "staySquare"></div>
</div>
<div id = "gazebo">
<div id = "gazeboPic"></div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="js/build/app.min.js" type="javascript"/>
</body>
</html>
Here is my SCSS:
/*-----------------------------------------------
* Base
-----------------------------------------------*/
$light-brown : #ddcebb;
body {
margin: 0px;
padding: 0px;
}
/*-----------------------------------------------
* Hero
-----------------------------------------------*/
.hero {
background-image: url("../../img/house_front.jpg");
background-repeat: no-repeat;
background-size:100%;
height: 700px;
}
.container {
display: flex;
height:260px;
}
#stay {
background-color: $light-brown;
font-size: 100px;
padding:30px;
width: 45%;
#staySquare {
margin: 0 auto;
display: flex;
height: 200px;
width: 100%;
border: 2px solid black;
}
}
#gazebo{
background-color: mistyrose;
width: 55%;
#gazeboPic {
background-image: url("../../img/walkway-to-Beach.jpg");
background-repeat: no-repeat;
background-size: 100%;
}
}
Thanks in advance!
EDIT: White space issue has been solved with background-size: cover; or alternatively background-size: auto 100%. The issue I am running into with this is when I resize the viewport window, the right side of the hero image is getting cropped off as I am making it smaller while the flex container is moving with the viewport window. Is there any way to keep this centered as I'm resizing?
Here is a screenshot : http://i.imgur.com/RNSWVTq.jpg
I need to make a website for a project. How can I make a moving gif as a fullscreen background?
Here is what I've done so far (an example)
HTML
<head>
<title>OFFICIAL SQUIDDINC</title>
<div class="gif-container"></div>
<head>
<html>
CSS
html, body {
height: 100%;
margin: 0;
}
.gif-container {
background: url("image.gif") center;
background-size: cover;
height: 100%;
}
There's a couple of things gone amiss in this snippet.
For the HTML;
You're missing an opening <html> tag. Albeit this may just be a bad copy paste for the question.
Your <title> is the only thing here that belongs inside the <head> tag.
The rest of your html should be encapsulated within a <body> tag.
<html>
<head>
<title>OFFICIAL SQUIDDINC</title>
<head>
<body>
<div class="gif-container"></div>
</body>
</html>
For the CSS;
You don't need to set a height for the html, body, however you will need to set it for the gif container. I've gone ahead and used the units vh and vw. These mean viewport height and viewport width, respectively. By specifying 100 for each, this will equal exactly the height and width of the browser viewport (screen).
html, body {
margin: 0;
padding: 0;
}
.gif-container {
background: url("image.gif") no-repeat 0 0;
background-size: cover;
height: 100vh;
width: 100vw;
}
DEMO;
http://codepen.io/anon/pen/Byevzv
I really need some help with a background on a website. You can see the image here:
Link to image
Now what i want is first of all to have the image placed in the top middle. Then i would like to have something like 10x250px (Width x Height) from the left of the image to be repeated - should a visitors screen resolution be wider than the image it won't seem like the site just stops at the edges.
I've tried several things, but it seems i keep running into different kind of technicalities that I'm not sure how to get around. So I would like to know how you would do it?
(The websites content will be 990px wide if that helps)
But the repeating image on your <body>, and put the other image background on your wrapper <div> (or similar).
Alternatively, you can use CSS3 for multiple background images on the same element. Won't be as compatible though.
Here is a way to accomplish this so that it attempts to center for all screen resolutions so that there is never a bottom scrollbar. bg.gif is your image ang bg_filler.gif is a 20px slice off of the side.
<style>
body
{
background-image: url(bg_filler.gif);
background-repeat: repeat-x;
background-color: #D1CDCA;
margin: 0px;
}
.backgroundPart
{
height: 300px;
background-image : url(bg.gif);
background-position: top center;
background-repeat: no-repeat;
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<div class="backgroundPart">
</div>
</body>
Here is a sample http://www.wesgrant.com/samples/BackgroundSample/default.html
Something like this style:
<style>
body{
margin:0;
padding:0;
background-image:'repeating_image...';
background-repeat:repeat-x;
}
#wrapper {
width:990px;
background-image:url(http://img852.imageshack.us/img852/4169/testbg01.jpg);
}
</style>
You would want to create two images, one for the body to repeat, and the other being the header that you already have. here is your image in a demo.
take a look at the source code to see how this works
http://luistovar.com/sodemo
No matter how large the screen resolution is now, the bg repeats.
Good luck
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
* {padding:0px; margin:0px;}
body {
background-image: url(repeat.jpg);
background-repeat:repeat-x;
background-position:top;
}
#header {
background-image: url(header.jpg);
background-repeat:no-repeat;
width:1600px;
height:252px;
margin:0px 0px 0px 0px;
}
-->
</style>
</head>
<body>
<center>
<div id="header"></div>
</center>
</body>
</html>