I have a map image (1080x1080px) I want this to be the the background of the body or a container div. I need the image to stay fixed in its place always, even when resizing the browser window.
I have divs inside of the main div container and these divs have images which are map markers that have been places at specific locations and they are toggled on and off as required.
Both the background image (map) and the markers need to stay in their position permanently.
How can I achieve this? What I have is not working...
body, html {
height: 100%;
}
#bg {
background-image: url(treasuremap_01.jpg);
height: 100%;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: 1080px 1080px;
position: relative;
}
#menu {
display: block;
width: 100px;
}
input:checked + .hidable {
display: none;
}
input:not(:checked) + .showable {
display: none;
}
#mark01 {
position: absolute;
top: 240px;
right: 490px;
}
#mark02 {
position: absolute;
top: 480px;
left: 460px;
}
#mark03 {
position: absolute;
bottom: 260px;
right: 490px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<title>Treasure Map</title>
</head>
<body>
<div id="bg">
<div id="menu">
<input type="checkbox" /> Marker 1
<div class="showable"><img id="mark01" src="xmark_01.png" alt="X Mark Red"></div>
<input type="checkbox" /> Marker 2
<div class="showable"><img id="mark02" src="xmark_02.png" alt="X Mark Green"></div>
<input type="checkbox" /> Marker 3
<div class="showable"><img id="mark03" src="xmark_03.png" alt="X Mark Magenta"></div>
</div>
</div>
</body>
</html>
You need to set the #bg property of width and height the same as the background-image size.
body, html {
height: 100%;
}
#bg {
background-image: url(http://basicblue.biz/treasure/treasuremap_01.jpg);
height: 1080px;
width: 1080px;
background-position: center;
background-repeat: no-repeat;
background-size: 1080px 1080px;
position: relative;
}
#menu {
display: block;
width: 100px;
}
input:checked + .hidable {
display: none;
}
input:not(:checked) + .showable {
display: none;
}
#mark01 {
position: absolute;
top: 240px;
right: 490px;
}
#mark02 {
position: absolute;
top: 480px;
left: 460px;
}
#mark03 {
position: absolute;
bottom: 260px;
right: 490px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<title>Treasure Map</title>
</head>
<body>
<div id="bg">
<div id="menu">
<input type="checkbox" /> Marker 1
<div class="showable"><img id="mark01" src="http://basicblue.biz/treasure/xmark_01.png" alt="X Mark Red"></div>
<input type="checkbox" /> Marker 2
<div class="showable"><img id="mark02" src="http://basicblue.biz/treasure/xmark_02.png" alt="X Mark Green"></div>
<input type="checkbox" /> Marker 3
<div class="showable"><img id="mark03" src="http://basicblue.biz/treasure/xmark_03.png" alt="X Mark Magenta"></div>
</div>
</div>
</body>
</html>
I'm only loading the background image in the HTML in the case that you're pulling the image dynamically via PHP. Otherwise, you can create separate classes with background images in the CSS file.
fixed and cover didn't use to play well together, and you would have to put the height property in an outer container, but I tested this code on Chrome, Firefox, Safari, and Opera, and it works fine.
div {
width: 100%
height: 90vh
background-repeat: no-repeat
background-position: center center
background-size: cover
background-attachment: fixed
} . End every of the sentence in an hyfin
Thanks but it won't send I'm trying to find a way out to send in a simple language programming. You can also write this code in the background shorthand then you'd simply add the background image to the div and adjust the height property as necessary.
Apostrophe in between the backgroundimage and and hyfin to end it to get the picture
Related
This question already has answers here:
How to center a "position: absolute" element
(31 answers)
How can I center an absolutely positioned element in a div?
(37 answers)
Closed 3 years ago.
I am trying to center a image within a container.
According to what I've understood, setting a container's position as "relative" that has a property of text-align set to center should
center block-level elements vertically that has their position
property set to absolute. However, why isn't this the case with my
code?
.first-container {
background-color: yellow;
height: 100%;
position: relative;
text-align: center;
width: 100%;
}
.mountain {
position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Playground</title>
</head>
<body>
<div class="first-container">
<img class="mountain" src="images/mountain.png" alt="">
</div>
<div class="second-container">
</div>
<div class="third-container">
</div>
</body>
</html>
I expected that the mountain image would be at the center of the first container that I set the background color to yellow for ease of distinction.
When you use position: absolute on an image in a container with position: relative, your image is at the center of your container. Or, more specifically, the top-left pixel of your image is as the center.
In order to center the image so that the center of the image is in the center of the containing element, you want to set a margin-left of negative half of the image's width. This can be seen in the following, with an image that's 100px wide, with margin-left: -50px:
.first-container {
background-color: yellow;
height: 100%;
position: relative;
text-align: center;
width: 100%;
}
.mountain {
position: absolute;
margin-left: -50px;
}
<div class="first-container">
<img class="mountain" src="https://placehold.it/100" alt="">
</div>
And assuming you set the width on the image itself, you can actually make use of a combination of CSS variables and calc() in order to determine this margin, with width: var(--image-width) and margin-left: calc(var(--image-width) / -2) on the image.
:root {
--image-width: 100px;
}
.first-container {
background-color: yellow;
height: 100%;
position: relative;
text-align: center;
width: 100%;
}
.mountain {
position: absolute;
width: var(--image-width);
margin-left: calc(var(--image-width) / -2);
}
<div class="first-container">
<img class="mountain" src="https://placehold.it/100" alt="">
</div>
your code is right but has a little bit bug here, you need to set height property to some pixels then you can see the image. For example:
.first-container {
background-color: yellow;
height: 400px;
position: relative;
text-align: center;
width: 100%;
border: 1px solid black;
}
added
left: 50%;
transform: translateX(-50%);
to .mountain. Hope this helps you. Thanks
.first-container {
background-color: yellow;
height: 100%;
position: relative;
width: 100%;
}
.mountain {
left: 50%;
transform: translateX(-50%);
position: absolute;
height: 100px;
width: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Playground</title>
</head>
<body>
<div class="first-container">
<img class="mountain"src="https://upload.wikimedia.org/wikipedia/commons/4/4e/Artesonraju3.jpg" alt="">
</div>
<div class="second-container">
</div>
<div class="third-container">
</div>
</body>
</html>
I have a web page that is 960px wide. Inside this page there's a section with an image inside that I want pushed all the way to the right so it's half way outside the page. The attached image below will show you an example of what I would wan this to look like.
I would also like it if the image is in the background so if the browser window is small in width it would just keep covering the image.
Here's a couple sites that has this:
http://cpanel.com/products/
At cpanel you can see the iPad on that page is only half way displayed when the browser window is smaller than image.
Another website with this effect is Doteasy.com here's the URL:
http://www.doteasy.com/
If you scroll down to the middle of their page you will see the Site builder section which includes a screenshot of the software. Their page is 980px wide and you can see that the screenshot is halfway outside the page wrapper.
The image should be 552px widde by 315px high.
.container {
width: 960px;
height: auto;
margin: 0 auto;
background-color: yellow;
}
section {
width: 100%;
height: 508px;
background-color: blue;
}
.image {
width: 552px;
height: 315px;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Site Example</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
</head>
<body>
<section>
<h1>This is the Section</h1>
<div class="container">
<div class="image">This would be the image.</div>
</div>
</section>
</body>
</html>
I hope you guys are able to help !
Thanks.
You can position absolutely relative to the container like so:
Add position: relative; to the container
Add absolute positioning to the image position: absolute; top: 0; right: -276px; (The right value is half the image width)
overflow-x: hidden on the container will stop the extra half of the image from being visible.
section {
width: 100%;
height: 508px;
background-color: blue;
}
.container {
position: relative;
width: 960px;
height: 400px;
margin: 0 auto;
background-color: green;
overflow-x: hidden;
}
.image {
position: absolute;
top: 0;
right: -276px;
width: 552px;
height: 315px;
background-color: red;
}
<section>
<h1>This is the Section</h1>
<div class="container">
This is the container
<div class="image">This would be the image.</div>
</div>
</section>
This should work for you. I added position: relative to the .container and section, then position: absolute to the image container. You can then use left: 25% to adjust how far off screen you would like the image to be. The 25% can be adjusted according to your needs. You can also use px instead of percentages if that works better for your needs.
.container {
width: 960px;
height: auto;
margin: 0 auto;
position: relative;
}
section {
width: 100%;
height: 508px;
background-color: blue;
position: relative;
}
.image {
width: 552px;
height: 315px;
background-color: red;
position: absolute;
left: -25%; /* -- Adjust this percentage as needed -- */
}
<!DOCTYPE html>
<html>
<head>
<title>Site Example</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
</head>
<body>
<section>
<h1>This is the Section</h1>
<div class="container">
<div class="image">This would be the image.</div>
</div>
</section>
</body>
</html>
The HTML is dead simple and I'm looking to add as few <div>s as possible as they make code readability a headache.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=720, user-scalable=yes" />
<title>SharpCraft</title>
<!-- Stylesheets -->
<noscript>
<link rel="stylesheet" href="css/style.css" />
</noscript>
<!-- jQuery -->
<script>
</script>
</head>
<body>
<!-- #main -->
<main id="main">
<!-- #content -->
<div id="content">
</div>
</main>
</body>
</html>
Regrettably my "style" of CSS development is guess and check so I've mutilated my stylesheet beyond repair. All I know for certain is that the content div should follow the following rules:
#content {
background: url("https://raw.githubusercontent.com/brianjenkins94/SharpCraft/master/SharpCraft/Assets/graphics/ui/Menu_background_with_title.png") no-repeat;
min-width: 640px;
min-height: 480px;
display: table;
}
With the end product resembling the following:
There are many ways to center an element horizontally and vertically, but I would suggest the CSS table approach, as you're doing it on the main content area, so we need to ensure the scroll bars to work properly when the window size is rather small.
html, body, #table {
height: 100%;
}
body {
background: black;
margin: 0;
}
#table {
display: table;
width: 100%;
}
#main {
display: table-cell;
vertical-align: middle;
}
#content {
background: url("http://goo.gl/TVjkjW");
width: 640px;
height: 480px;
margin: 0 auto;
}
<div id="table">
<div id="main">
<div id="content"></div>
</div>
</div>
JSFiddle: http://jsfiddle.net/ykato61n/
(I adjusted the markup slightly to make it work)
Heres a pure CSS solution, it makes use of the transform and translate function from CSS3. It uses minimal HTML and CSS. I've put the content div's background to red, just incase the image disappears for some reason.
#wrap {
color: #fff;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: scale(2, 3);
/* Safari */
transform: scale(2, 3);
-webkit-transform: translate(-50%, -50%);
/* Safari */
transform: translate(-50%, -50%);
/* Safari */
background: red url("https://raw.githubusercontent.com/brianjenkins94/SharpCraft/master/SharpCraft/Assets/graphics/ui/Menu_background_with_title.png") no-repeat;
background-size: cover;
background-position: center center;
width: 90%;
padding-bottom: 67.50%;
/* sorts out aspect ratio*/
}
body {
background: #000;
}
#content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-width: 640px;
min-height: 480px;
/*background:blue;*/
display: table;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="wrap">
<div id="content">content</div>
</div>
</body>
</html>
I'm not sure why you wanted the content div to have display: table;, but have put it in for good measure.
I have big problems with css buttons... My screen size is 1366x768 and their position is just fine until I zoom out in browser or show it to someone who have bigger screen.
Can anyone help me, please?
Site with problems: http://riotpointscodes.info/region.html
You are positioning your buttons absolutley to the document body:
Example left button:
position: absolute;
top: 475px;
width: 251px;
Place all buttons in a container positioned over your paper and set the position to relative or absolute and then play with the placement of the buttons.
When you use absolute positioning, you need an anchor point. The anchor point is the first element up the HTML tree that has position:relative defined. If no element is found, the BODY tag becomes the anchor point.
Since you have a wrapper with stuff inside it, this should be come your anchor point in order to keep everything inside even if the browser resizes, not the BODY.
Bored at work today and your graphics were pretty cool so....
Here you are my friend:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Riot Points Codes</title>
<link rel="SHORTCUT ICON" href="http://agessy.com/favicon.png" />
<style type="text/css">
body {
background: url("http://riotpointscodes.info/images/background.jpg") no-repeat scroll center top #070b14;
margin: 0;
padding: 0;
}
#wrapper {
width: 895px;
height: 493px;
position:relative;
top:180px;
margin:0 auto;
background: url('region_files/paper.jpg') no-repeat top center;
}
.choice {
background: url("region_files/map.png") no-repeat scroll 0 0 transparent;
height: 212px;
left: 50%;
margin-left: -259px;
position: absolute;
top: 43px;
width: 517px;
}
.logo {
left: 50%;
margin-left: -205px;
position: absolute;
top: -135px;
}
#lol-custom-buttons {
position: absolute;
bottom: 107px;
left: 0px;
width: 100%;
height: 90px;
text-align:center
}
.play-free-link {
height: 90px;
width: 251px;
background-repeat: none;
color: #ECC873;
display: inline-block;
}
.play-free-link.one {
background-image: url("http://riotpointscodes.info/images/1n.png");
}
.play-free-link.one:hover {
background-image: url("http://riotpointscodes.info/images/1h.png");
}
.play-free-link.two {
background-image: url("http://riotpointscodes.info/images/3n.png");
}
.play-free-link.two:hover {
background-image: url("http://riotpointscodes.info/images/3h.png");
}
.play-free-link.three {
background-image: url("http://riotpointscodes.info/images/2n.png");
}
.play-free-link.three:hover {
background-image: url("http://riotpointscodes.info/images/2h.png");
}
</style>
</head>
<body>
<div id="wrapper">
<div class="logo"><img src="region_files/logo.png"></div>
<div class="choice"></div>
<div id="lol-custom-buttons">
<a class="play-free-link one" href="http://riotpointscodes.info/"></a>
<a class="play-free-link two " href="http://riotpointscodes.info/"></a>
<a class="play-free-link three" href="http://riotpointscodes.info/"></a>
</div>
</div>
</body>
</html>
I am trying to position an image to be at the top of the page and stretching to both sides of the page with a height of 51px. However, there is a gap between the image and the top of the page and both sides of the page. Please can you tell me what I am doing wrong?
#background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:100%;
}
#twitter {
background: url(http://maxk.me/test/img/twitterbg.png) repeat;
height: 51px;
width: 100%;
position: fixed;
}
HTML
<html>
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="background">
<img src="...." class="stretch" alt="" />
</div>
<div id="twitter">
</div>
</body>
</html>
You need to remove the default margin on body:
html, body {
margin: 0;
padding: 0
}
You should also add a valid doctype as the very first line:
<!DOCTYPE html>
Without this, your page will be very broken in Internet Explorer, and generally inconsistent between different browsers.