I want to create a header image that is the background for part of the page. The requirements are as follows:
width: 100%
min-height: 400px
be below the header bar
be able to place text and/or an overlay on top of it
most importantly I want the image to be centered no matter the screen-size
There is a header bar above where I want the image and the rest of the page will proceed below the image. Basically trying to create the image as a background for the title of the page.
HTML for your pages:
<!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>
<title>WebSite</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="banner">Text floating over image goes here</div>
And then in the .css file, you describe id-"banner":
#banner {
height: 400px;
padding: 0;
background: #1d1e8a url(./images/website_banner.png) no-repeat;
color: #333;
background-size: 100% 100%;
}
Related
I have a div that has a certain fixed width and height. I want to fit inside an image (it's dimensions are previously unknown) without stretching it (keep aspect ratio). Object fit would work but for the sake of image being wrapped inside of another wrapper div (to apply shadow), so it cannot be used this time.
To make it clear: I can't use object-fit, nor making it a background image.
How is this done properly with CSS?
further images to demonstrate my intentions: (blue rectangle on the right represents the original image in its original size, on the left it is how it should display inside it's dashed parent)
If i understood correctly this should do it
object-fit: contain;
.section{
height:90vh;
width:100%;
border: 2px solid black;
}
.img{
height:100%;
width:100%;
background-image: url('https://images.unsplash.com/photo-1481349518771-20055b2a7b24?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1239&q=80');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
<!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.0">
<title>Document</title>
</head>
<body>
<div class="main">
<div class="section">
<div class="img"></div>
</div>
</div>
</body>
</html>
you can resize the browser and the aspect ration wont change, I hope this is what you are looking for
I am new to HTML/CSS and I am having trouble making the background image of my div cover the full screen. I have used background-size:cover but it still has large margins on the left and right of the screen.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta viewport="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
</div>
</body>
<html>
CSS
.container{
height:100vh;
width:100vw;
background-image:url("city.jpeg");
background-repeat:no-repeat;
background-size:cover;
background-position:center;
opacity: 0.8;
}
Please try using img: {width: 100% height:100%}. Your best approach would be to inspect the element and check if the div that contains the image is restricitng its size or not. You can use firefox to inspect (I just prefer it over chrome as it shows the size of any element better visually).
By default, the body has a margin around it. Try this:
body {
margin: 0;
}
Use following code:
.background-image {
width: 100vw;
height: 100vh;
}
EDIT: Simplified the question:
I have a 100% width "seamless" iframe in which I embed another (local) page.
When accessing the page directly on Safari, the contents are properly zoomed out to fit the screen.
However when the website is in an iframe, the page loads zoomed in and I have to zoom out manually in order to see it in full width. Is there a workaround for this?
Iframe code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>iFrame</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html, iframe
{
height: 100%;
margin: 0;
padding: 0;
}
iframe
{
width: 100%;
display: block;
}
</style>
</head>
<body>
<iframe src="index.html"></iframe>
</body>
</html>
I am developing asp.net webforms with a background that is made up of 3 images; top, left and right. The 3 pieces are cropped from a full image to accomodate for content body of 770px width in the middle. At present, these 3 images moves with the body content as I scroll down or up. I would like the background to remain stationary when I scroll the page. I use this code in plain html which works for a single full background image:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Layout Example</title>
<link rel="stylesheet" type="text/css" href="./Layout Example_files/style.css">
<style type="text/css">
body{
background: url( "images/SoapBubbles.jpg" ) no-repeat fixed top center;
}
</style>
</head>
How do I do this in asp.net even for just one single image for the whole background?
I would use a separate div and use fixed positioning on it. Example
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Layout Example</title>
<link rel="stylesheet" type="text/css" href="./Layout Example_files/style.css">
<style type="text/css">
.fixed-background{
background: url( "images/SoapBubbles.jpg" ) no-repeat fixed top center;
position:fixed;
z-index:-1;
top:0;
right:0;
left:0;
bottom:0;
}
</style>
</head>
<body>
<div class="fixed-background"></div>
<div class="content"></div>
</body>
when zooming in and out my page Link of my page in Chrome browser the background is distorted and page looks like this Look of page after zooming in Chrome.
What can be changed in code to fix it for zooming in Chrome browser without distorting background graphic?
This is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Page Under Construction</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<style type="text/css">
body {
background:#d7df29 url('1.jpg') center center no-repeat;
width: 100%;
height: 100%;
}
html, body {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
</body>
</html>
Thank you very much!
this line says, WE CANT HELP YOU YET...
background:#d7df29 url('1.jpg') center center no-repeat;
I just read you comment, you got an image, so it will be distoring with zoom in / zoom out...it would be better to go for CSS to avoid such distorting...