I need the banner on my website to center and resize according to the screen size the website is being viewed on (including mobile). I need it to center as in the actual center of the div is in the center of the screen, even if the div itself is wider than the screen it's being viewed on - so the left and right sides of it (/the image contained inside) are cropped/hidden off-screen.
Here's a page with the banner on as it is currently:
http://keshiheads.co.uk/test
Full size of banner image for reference: http://keshiheads.co.uk/Background.png
<head>
<meta name="viewport" content="width=100%, initial-scale=1, user-scalable=yes">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body style="overflow-x:hidden;">
<div style="position:absolute;top:0;">
<div style="position:absolute;top:0;left:0;"><img src="Background.png" style="height:140px;"/></div>
If you use bootstrap, you can put the banner in a "container" class which will center your banner and then you can use css cut off points to make it responsive.
Related
I have combined several large images into a Sprite. Each image when displayed full size, is larger than my iPad screen size. If there is a single image in the sprite, the full image is available to view. I simply scroll to the right or down to see the parts of the image which don’t fit on the screen initially.
If there are several images in the sprite, I can scroll right to see the part of the image which doesn’t fit on the screen initially, however the height of the image is truncated to fit the screen height, so I can’t scroll down to see the rest of it. If I turn my iPad from landscape to portrait the displayable image enlarges to the portrait height of the screen.
How can I fix this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="general.css">
<style>
#img1 {
background: url("bates-sprite.jpeg");
background-repeat: no-repeat;
object-fit: none;
width: 2049px;
height: 1537px;
}
#img1 {object-position: 0 0;}
</style>
</head>
<body>
<img id="img1" src="bates-sprite.jpeg" alt="Camberley Mail front page report">
</body>
</html>
I don’t know why the monthly image sprite behaved differently from the single image sprite, but simply putting the image inside a div solved the problem.
<div>
<img id="img1" src="bates-sprite.jpeg" alt="Camberley Mail front page report">
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div>
<h1>Hello World</p>
<p>This is the content of the p element. It shrinks when I shrink the viewport</p>
</div>
Why is the content shrinking on resizing the viewport even though it does not have a container class? (any example to witness the difference between div having container-class and a non-container div will be highly appreciated)
By default a div has 100% width, so it will shrink with the viewport if that is resized (and if the div is a direct child of body or of any other element that always fills the viewport's width).
Bootstrap has certain classes, but if none of those is used, a div must still behave like a "regular" div (i.e. any div without using bootstrap)
Try using:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
In the Head section of your HTML file
I want to tile an image through the entire web document which I want to print. I have used background property to tile that, but I have to set the z-index property to make that image placed over all elements of the web page. Help me solve this.
stick it to the root style
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:root
{
background-image:url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRxExzbsZCvO6lpE1tll_7pQLB5nd4RkWkrMannssfhAYni_Ct");
opacity: .4;
}
</style>
</head>
<body>
<div id="overlay" onclick="off()"></div>
<div style="padding:20px">
<h2>Overlay</h2>
<p>Add an overlay effect to the page content (100% width and height with background with 40% opacity).</p>
<button>some button here</button>
</div>
</body>
</html>
Context: http://tomtam.net
Example: http://getbootstrap.com/examples/navbar-fixed-top/
My navbar is tiny mobile. Also how can I center the image ? Thank you
You're missing viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
Place it before <title> tag.
Also, you should place your "row" div inside a div with "container" class.
How do I set the body element to always occupy 100% of the width and height of the visual viewport on the iPhone? I want to center elements vertically and horizontally within the visual viewport (UIWebView).
Would this work?
<img src="#" style="margin:0 auto;" />
Put this inside head tag
<meta name="viewport" content="width=device-width, initial-scale=1">