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...
Related
guys I am new to front end development and I am trying to learn from building a page.
Here is the demo.
https://codesandbox.io/s/goofy-boyd-xscgd
it looks fine on full-screen but when I narrow the viewport. The picture seems to be getting far away from the text and the gap between them are getting bigger as the picture shows.
The effect I wanted to achieve is that when I narrow the browser the picture would get closer to the text(and there would be overlap between them). When it is viewed on phone, the picture will become the background picture of the screen. like this
Can someone please help me with this?
Set the image element to
position: absolute;
right: 0;
in the CSS file. That should work.
Well, You can do this with CSS media query. Here is a sample, I hope you can tweak around and make it work for you.
HTML
<!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">
<title></title>
</head>
<body>
<div id="main">
<div id="txt">
<h1>Your Text</h1>
</div>
<div id="pic">
<img src="https://via.placeholder.com/500">
</div>
</div>
</body>
</html>
CSS
#main{
width:100%;
}
#txt{
width:50%;
display: inline-block;
}
#pic{
width:48%;
display: inline-block;
}
#media (max-width: 500px) {
#pic{
display: none;
}
#main{
background: url("https://via.placeholder.com/500");
background-size: cover;
}
#txt{
width:100%;
text-align: center;
}
}
Reduce your browser's size to smaller than 500px and refresh, you will see the change. If you want to do this in more dynamic way, you have to use javascript/jquery.
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'm trying to set a full-screen background image (1366x854) with css. I've tried in many ways peeking online but I can't set my image as it is. It is possible to have it full-screen without get cut parts? The img below is just a prototype and code is really basic. Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<title> LIVE </title>
<link href="css/Live.css" rel="stylesheet">
</head>
<body>
</body>
</html>
body {
background: url(Live.png) no-repeat center center fixed;
background-size: contain 100% 100%;
}
I am having troubles with elements size with CSS on mobile.
The background image have 853x480 px, that's supposed to fit perfectly I am wrong?
It's really very very simple CSS code, why that is going on?
Desktop Responsive view: https://prnt.sc/j7d1jr
On desktop browsers the page fit perfectly, the elements like background image and inputs displays perfectly.
On mobile all that resize, all smaller
Iphone mobile view: http://prntscr.com/j7d0ej
How to fix that?
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Banco BRB</title>
<style>
body {
background-image: url("bg_login.png");
background-color: red;
background-repeat: no-repeat;
width: 820px;
height: 480px;
}
</style>
</head>
<body>
<br><br><br><br><br>
<center><img src='user.png' height="75%" width="40%"></center>
<br><br>
<form>
<center><label><input type="text"></label>
</form>
</body>
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%;
}