I have a doubt, I would like to scale the sides of my background image outside the visible width, so as to extend the background to the height that determined
To be more clear, I would like the browser to read only the width that I defined to be viewed, while the rest of the background would serve only to not leave the background spaghetti, my idea would be to extend the page down while the sides would serve only not to make the background ugly and disproportionate.
sorry my bad english.
CSS:
/* Main */
body{
margin: 0;
padding: 0;
}
.container{
position: absolute;
}
.main-logo h1{
position: inherit;
left: 0;
-webkit-text-stroke: 1.5px black;
font-size: 32px;
font-family: "8 BIT WONDER";
}
.background-img-main{
position: absolute;
width: 100%;
height: 1800px;
background-size: 0, 100%;
z-index: -100;
overflow: hidden !important;
}
HTML:
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Forbidden Series</title>
<link rel="stylesheet" href="assets/styles.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body>
<!--Container-->
<div class="container">
<!--Header-->
<header>
<div class="main-logo"><h1><font color="#780002">Forbidden </font><font color="#FFFFFF">Series</font></h1></div>
</header>
</div>
<img src="img/Screenshot_1.png" class="background-img-main">
<img src="img/background.jpg" class="background-media-main">
<!--Scripts-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>
How I wish it were
set an height of 100% on your main container, and put and overflow:auto rule
.container{
position: absolute;
height:100%;
overflow:auto;
}
also, you want to set off the body and html overflow
body,html {
overflow:none;
}
Related
I have the following HTML code and I am trying to position the links right below the image, but fail badly.
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<html>
<head>
<body>
<style>
html, body {
height: 90%;
background:#000000;
color:#fff;
}
img {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-width: 100%;
height: auto;
}
</style>
</head>
<img src="http://www.clker.com/cliparts/b/3/1/7/1374685821502984977google%20logo-md.png">
<br>Deutsch | English</p>
</body>
</html>
However, I need to place the links right below the image (centered) but it seems like it's impossible.
I wonder if any of you knows a solution that would work in this case.
try this
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<html>
<head>
<body>
<style>
html, body {
height: 90%;
background:#000000;
color:#fff;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
a{
width: 100%;
}
</style>
</head>
<img src="http://www.clker.com/cliparts/b/3/1/7/1374685821502984977google%20logo-md.png">
<br>Deutsch | English</p>
</body>
</html>
Try This Code
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body {
height: 90%;
background:#000000;
color:#fff;
}
img {
max-width: 100%;
}
.container {
position: relative;
}
.link {
position: absolute;
top: 200px;
left: 60px;
}
</style>
</head>
<body>
<div class="container">
<img src="http://www.clker.com/cliparts/b/3/1/7/1374685821502984977google%20logo-md.png" alt="" />
<h3 class="link">Deutsch | English</h3>
</div>
</body>
</html>
I am trying to create a simple webpage using bootstrap that has some text fixed centered at the top and some more centered text fixed to the bottom of the page.
In the middle of the page I need an centrally horizontal and vertically placed image that scales depending on resolution/device.
The page needs to be full height of the viewport.
I have tried using the following code but it doesnt work properly and is a miss and there must be a simpler way of doing it?
The logo image is 450px x 480px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="" />
<meta name="author" content="" />
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<style>
html, body {
height: 100%;
}
.holder {
width: 100%;
height: 100%;
min-height: 100%;
display: block;
}
.fill {
min-height: 100%;
height: 100%;
}
.col-md-12 {
position: relative;
min-height:100vh!important;
}
.toptext{
background-color:#ffffff!important;
z-index:99999!important;
}
.bottomtext {
position: absolute;
width: 100%;
left: 0;
bottom: 0;
text-align: center;
margin-bottom: 20px;
background-color: #ffffff !important;
z-index: 99999 !important;
}
.middleimage > img {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index:1!important;
max-height:350px!important;
}
#media screen and (min-width:1px) and (max-width: 767px) {
h3 {
font-size: 16px !important;
}
.bottomtext{
bottom:80px!important;
}
html,body {
overflow: hidden!important;
}
}
#media screen and (min-width:567px) and (max-width: 767px) {
.bottomtext {
bottom: 80px !important;
}
html, body {
overflow:visible !important;
}
.middleimage>img{
max-height:100px!important;
}
}
#media screen and (min-width:760px) {
.bottomtext {
bottom: 0 !important;
}
html, body {
overflow: visible !important;
}
.middleimage > img {
max-height: 480px !important;
}
}
</style>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container fill">
<div class="holder">
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="toptext text-center">
<h3>Top of page info</h3>
<hr>
</div>
<div class="middleimage">
<img src="/holdingfiles/mylogo.png" alt="" class="img-responsive " />
</div>
<div class="bottomtext">
<hr>
Bottom of page / footer info
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Carl,
Since you are using bootstrap, go with 'img-responsive' class on div/img and it should scale nicely.
EDITED: you can use it as background image for your div: check out the following link which should give you what you want
https://css-tricks.com/perfect-full-page-background-image/
I have a problem where there is a persistent bit of white space to the right of my row in a bootstrap site, despite the fact that I seem to have everything set to full width style (0 margin, container-fluid, etc.).
I started stripping elements off of my site to get it as simple as possible to see what the problem is. I'm now down to just the head content, a container-fluid, and a row, and yet the problem still persists.
html, body, .container-fluid {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.home {
width: 100%;
height: 100%;
background-image: url("../images/background3.jpeg");
padding-top: 10%;
padding-bottom: 10%;
background-size: cover;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Modern Business - Start Bootstrap Template</title>
<link href="https://fonts.googleapis.com/css?family=Pathway+Gothic+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open Sans" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row home">
</div>
</div>
</body>
</html>
The pic below is what the site looks like. You can see the white space quite clearly (on the right, very small, like 5px or so).
The default margin for the row class is causing this
edit your css for .home class like this:
.home{
width:100%;
margin:0;
padding:0;
}
For any element, It is always a good idea to put margin:0;padding:0; the second you start to write its css. You can always add margins and paddings later as they fit but it wont cause you problems like this.
Add margin:0, to your .home class to override bootstrap default margin:
https://jsfiddle.net/yc6p7osk/1/
If you inspect .row - you will notice some default margins there.
Also, you could use another boostrap class for 100% width container, probably.
html, body, .container-fluid {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.home {
width: 100%;
height: 100%;
padding-top: 10%;
padding-bottom: 10%;
background-size: cover;
box-sizing: border-box;
}
When you use width and height 100%, the default is to add the borders and such to the width. Add box-sizing: border-box; and your block will be 100% regardless.
More info here: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
HTH.
I’m struggling withthis of few hours new, and can’t get it right. My CSS skills a pure, so please understand.
So what I want to achieve is I have image on web site and when I change size of the browser window, image size has to adjust to a browser size, so whole image can be seen. Also image has to be in the center of the page.
Thanks for any help.
index.php:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<title>James Laycock</title>
</head>
<body>
<div id="main">
<div id="content">
<div id="image_container">
<img src="images/01.jpg" class="image" /></div>
</div></div></body></html>
style.css:
body{
margin: 0;
padding: 0;
padding-top: 10px;
text-align: center;}
#main {
height: 90%;
width: 1000px;
position: absolute;
border: 0px;
padding: 0;
margin: 0 auto;}
#content{
height: 90%;
width: auto;
margin-top: 10px;
margin-right:10px;}
#image_container{
height: 100%;
max-height:100%;
width: auto;}
.image{
height: 100%;
width: auto;}
Try putting on the image container
text-align: center
And, on the actual image put height/width in percentage.
Edit: don't forget also centering the image container, or setting it's width to full screen.
I have an absolutely positioned element with a background image that must appear as a small, horizontal strip reaching up to the edge of the browser window without needing a scrollbar. How could I do this?
Set both left and right CSS properties to 0.
Kickoff example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 4535198</title>
<style>
#strip {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background-image: url('some.png');
}
</style>
</head>
<body>
<div id="strip"></div>
</body>
</html>
Try this:
<style type="text/css">
.hrBar
{
background-image: url('<YOUR_IMAGE_PATH>');
background-repeat: repeat-x;
height: 1px; // Or the Height of your Image
position: absolute;
}
</style>
<div class="hrBar">
</div>