I have made an image 100% height and width. But I had some headings and paragraphs underneath. When viewing my website I cannot scroll down further to see the headings and paragraphs? Also, I want a small burger navigation bar over the top of the image, at the top. But since making the image full screen, this has been "pushed away" as well?
<!doctype html>
<html lang="en">
<head>
<meta charset = "utf-8"/>
<title>XXXXX</title>
<link rel = "stylesheet" href="s.css"/>
</head>
<body>
<nav id = "burger">
</nav>
<section id = "top_image">
<img src="images/bg1.png"/>
</section>
<section id = "description">
<article>
<header>
<h4>DESCRIPTION</h4>
</header>
<p>
XXXXXX<br />
XXXXXXXXXXX<br />
XXXXXXXX
</p>
<p>
XXXXXXX<br />
XXXXXXX<br />
cXXXX<br />
XXXXXXX
</p>
</article>
</section>
CSS
img {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
When you make the image (or in this case, all img tags) position: absolute, you take them out of the page layout flow. That means everything else renders like that image isn't there. Your menu bar and paragraphs are there underneath the image, but you can't see them. If you make the paragraph text long enough it will poke out the bottom. If you want the image to be part of the page layout, get rid of the position: absolute.
Add this temporarily to your CSS to see what's going on:
#description {
position: relative;
z-index: 100;
}
You'll suddenly see your text on top of the image.
The issue isn't that things are being pushed down, the issue is that your image is covering every other element on the page because you've positioned it absolutely. You can't scroll because there's nothing to scroll to.
If you are trying to use the image as a background image, then you should code it as a background image.
body {
background:url('http://placehold.it/1024x768');
background-size:cover;
}
JSFiddle
Related
I keep trying to use different images as a background but I am unlucky so far in figuring out if it is an issue with the photo file size or is there something wrong with the pictures i use? Asking since i tried with one image and the background image shows and works but any other picture that I want to use will not show up or work properly even though I have looked over my code multiple times and it is correct. Here is my current code
<!DOCTYPE html>
<html>
<head>
<title>Winston Berz</title>
<style>
body {
background-image: url("C:\Users\apere\OneDrive\Desktop\HTML Progress\Winston Berz\All Photos\img5.jpg") no-repeat center center fixed;
min-height: 100%;
background-size: 100%;
}
</style>
</head>
<body>
<div id="Navbar">
<nav>
Main
About Me
Contact
Photos
</nav>
</div>
<div id="Main Title">
<header>
<h1>Winston Berz</h1>
</header>
</body>
</html>
Want to also note that I also was using a separate document for css and got the same results so this time I resorted to internal css.
Help! Please and thank you I am still relatively new to coding.
you could try to clear your browser cache (here is how) maybe the browser is storing previous images.
Also, you could consider creating a <div> and place your background images there instead of setting the image inside css.
inside the <body> tag you can add
<div class="background-images-wrapper">
<img src="image/link/path" alt="background1"><img>
</div>
and inside your css style sheet you add this
.background-images-wrapper{
height: 100%;
width: 100%:
object-fit: cover;
z-index: -1;
z-index: -1 is to make sure that your images will always stay behind the rest of your elements
These other elements should appear on the inserted image.
The backdround color is set then i want a white box in center and all contents on the white box.
like this page.
I am just practicing not creating any page for phishing.
You can find some info at W3Cschool.
However, with CSS you are able to change almost all of an element html property.
For example, if you have a header element as:
<h1>Header with Background</h1>
you can set a background image with css:
<style>
h1 {
background-image: url("paper.gif");
}
</style>
I leave an example in which the image of the background of different HTML tags is applied
.bg {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Color_icon_red.svg/1024px-Color_icon_red.svg.png");
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 class="bg">Hello World!</h1>
<p>This page has an image as the background!</p>
<p class="bg">CIAO!</p>
<span class="bg">HELLO!</span>
<button class="bg">HOLA!</button>
</body>
</html>
I have a picture that i've positioned absolutely to use as a background. But it's covering up the content of the page.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#pic1
{
position:absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<h1> hi there </h1>
<h1> hi there </h1>
<h1> hi there </h1>
<img id="pic1" src="1.jpg" width="100%" alt="picture">
</body>
</html>
You should change the z-index css property of the image
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order
how ever you can use another property on you body element to set background :
background-image:url('image url');
Why not use background image placement? This way you have less markup and more control over how you want the background to be displayed. If you still want to place background in this way, then try z-index: -1 and see if that works.
Overall, the way you are creating this page is less than optimal. You are setting image width using attribute. Why not get rid of img tag altogether and just roll with image placement using CSS. Lots of stuff on the web that shows how to do it.
You misunderstood me in my previous message so I post a new with an example.
Assume the following that you float for example an image left and some div to the right containing for example which browser you use and date + time and some other things perhaps.
Now you want also to display a name for the company centered between these two floats on the same row. The text of the company in between should always be centered even when you make the browser width smaller.
In this example I can't make the text to be placed centered between the two floats.
It doesn't matter if I put the text in inline element or block element.
I have tried both. In this example I have a p tag.
It doesn't work to use text-align:centered when you have elements that are floating.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title></title>
<style type = "text/css">
#imageone
{
float:left;
}
p#right
{
float:right;
}
div p
{
text-align : center;
}
</style>
</head>
<body>
<div style="background:red">
<p>My company</p>
<p id="right">2013-06-12 10:00:12</p>
<img id="imageone" src="img/die1.png" alt="photo" />
</div>
</body>
</html>
This is relatively simple to do if any two of the elements are fixed-width. You can implement it by using position: relative on the containing element, and position: absolute on the children (the blocks to be aligned left, right, and center).
See this jsFiddle for an example.
You could put your company name after the floated elements in the html:
<body>
<div style="background:red">
<p id="right">2013-06-12 10:00:12</p>
<img id="imageone" src="img/die1.png" alt="photo" />
<p id="name">My company</p>
</div>
</body>
Adding margin 0 to p#right also ensures it will appear vertically centered with the other elements:
#imageone
{
float:left;
}
p#right
{
float:right;
margin: 0;
}
div #name
{
text-align : center;
}
}
See a fiddle here: http://jsfiddle.net/WDrVK/1/
Can you style the center element as margin: 0 auto;?
As in this example: http://bluerobot.com/web/css/center1.html
I am wondering if the div in this css and html will stay at the center if I i view this site on a larger screen. since I am only working on a 16 inch screen/ monitor. will the div in this code will stay at the center even if I move or view it in a larger/different screen? ?
The Html
<html>
<head>
<title>Midterm Practice</title>
<link rel = "stylesheet" type = "text/css" href = "layout.css"/>
</head>
<body>
<div id = "container">
<div id = "navbar">
<ul>
</ul>
</div>
</div>
</body>
</html>
The CSS rules
body{background-color: pink;}
#container{background-color: white;margin-left: auto;margin-right: auto;border: 1px solid white;border-radius: 15px;width: 1000px;height: 800px;}
#navbar{position:absolute;}
I am just starting out with CSS please don't add advance or above average answers
Using margin-left: auto; margin-right: auto; should have the desired effect for you. They will basically centre the "container" div in the body tag. You could always test it out yourself by reducing the width of the container to something you can test in your browser (Chrome and Firefox's dev tools are useful for playing with CSS within the browser).