I have one background and one centered image in my page. Its HTML + CSS.
It works fine in desktop browsers. But when I open it from an Android Device, I have two problems.
1- Background image dont fit the page.
2- My centered image looks like it has been zoomed in. In Portrait mode it looks ok but when I turn the device to landscape position, it doesnt fit the screen. My screen resolution is 1280x720, my image size is 954x604. It should fit but it doesn't. It simply looks bigger and can't see the top of the image.
Can anyone help?
Here is the test page
Here is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Celline - Selin Sarpkan</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="resource/styles.css">
</head>
<body>
<div class="dispencere">
</div>
</body>
</html>
Here is the CSS:
*{ margin:0; padding:0; }
body{
font-size:9px;
color:#666;
font-family:Arial, Helvetica, sans-serif;
overflow: hidden;
background-image:url('../images/paper.jpg');
background-repeat: no-repeat;
background-size:cover;}
.dispencere{
background-image:url('../images/main.png');
width:954px;
height:604px;
position:absolute;
left:50%;
top:50%;
margin:-295px 0 0 -465px;
text-align:center;}
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.
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've created a page that scales large images to fit the window, however it does not allow the user to zoom once the image is loaded and scaled to fit. I want the initial view size to be as realized by the css as shown below, but thereafter I want the user to be able to zoom (or pinch-zoom on mobile/touch-screen devices), as well as Ctrl+0 to return to the initial view size. How can I accomplish this? Here's the complete code:
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: fixed;
max-width: 100%;
max-height: 100%;
top:0;
left:0;
bottom:0;
right:0;
margin: auto;
}
</style>
</head>
<body>
<img src="LARGE_IMAGE.jpg">
</body>
</html>
You should make width on viewport. Device width wouldn't change after that anyway.
I am trying to create a background image that will have a scroll bar to scroll the image down vertically. I like the idea of using width and height percentages because it seems like this method always fits the image to any screen resolution. Unfortunately, the length of the image is rather large and therefore the bottom of the image gets cut off. I have tried various ways to get this working including changing the background-size properties, using overflow-y:scroll and other edits that are not worth mentioning. Here is the code I am working on thus far:
HTML
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta charset="UTF-8">
</head>
<body>
<div class='image'></div>
</body>
</html>
CSS
#charset "UTF-8";
/* CSS Document */
body {
margin:0;
}
.image {
position:absolute;
width:100%;
height:100%;
background:black;
background-image:url(../pictures/testjpg);
background-size:cover;
overflow-y: scroll;
}
UPDATE: without height you can't scroll the image top to bottom. but you cant fit this any screen.
body,html {
margin: 0;
}
.image {
background-image: url("http://www.w3schools.com/howto/img_parallax.jpg");
background-position:center;
background-size: 100% 100%;
height:300vh;
}
<body>
<div class="image">
</div>
</body>
A scroll bar moves the viewport so that you can see what's not on the screen. At the above code, if you make your image to expand&contract by giving it relative height (%100 height&width of the screen), there will never be a 'scroll-able' vertical scroll bar because there's nothing to scroll to. It never 'overflows'.
To actually have scroll-able images, you need to give it a width - or in this case- height larger than your viewport.
I really need some help with a background on a website. You can see the image here:
Link to image
Now what i want is first of all to have the image placed in the top middle. Then i would like to have something like 10x250px (Width x Height) from the left of the image to be repeated - should a visitors screen resolution be wider than the image it won't seem like the site just stops at the edges.
I've tried several things, but it seems i keep running into different kind of technicalities that I'm not sure how to get around. So I would like to know how you would do it?
(The websites content will be 990px wide if that helps)
But the repeating image on your <body>, and put the other image background on your wrapper <div> (or similar).
Alternatively, you can use CSS3 for multiple background images on the same element. Won't be as compatible though.
Here is a way to accomplish this so that it attempts to center for all screen resolutions so that there is never a bottom scrollbar. bg.gif is your image ang bg_filler.gif is a 20px slice off of the side.
<style>
body
{
background-image: url(bg_filler.gif);
background-repeat: repeat-x;
background-color: #D1CDCA;
margin: 0px;
}
.backgroundPart
{
height: 300px;
background-image : url(bg.gif);
background-position: top center;
background-repeat: no-repeat;
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<div class="backgroundPart">
</div>
</body>
Here is a sample http://www.wesgrant.com/samples/BackgroundSample/default.html
Something like this style:
<style>
body{
margin:0;
padding:0;
background-image:'repeating_image...';
background-repeat:repeat-x;
}
#wrapper {
width:990px;
background-image:url(http://img852.imageshack.us/img852/4169/testbg01.jpg);
}
</style>
You would want to create two images, one for the body to repeat, and the other being the header that you already have. here is your image in a demo.
take a look at the source code to see how this works
http://luistovar.com/sodemo
No matter how large the screen resolution is now, the bg repeats.
Good luck
<!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>
<style type="text/css">
<!--
* {padding:0px; margin:0px;}
body {
background-image: url(repeat.jpg);
background-repeat:repeat-x;
background-position:top;
}
#header {
background-image: url(header.jpg);
background-repeat:no-repeat;
width:1600px;
height:252px;
margin:0px 0px 0px 0px;
}
-->
</style>
</head>
<body>
<center>
<div id="header"></div>
</center>
</body>
</html>