I've got some trouble with my code. At the moment I'm working with HTML and CSS and got some problems with my header-banner-picture. It isn't responsive and I don't know why.
hmtl
<header id="header-banner"></header>
css
#header-banner {
width: 100%;
height: 0;
padding-top: 20.83%;
background:url("../img/header.jpg") no-repeat;
background-size: contain;
}
I'm also open for a JavaScript solution, but I really don't know why it's not working.
I' looking forward to hearing from you,
Fred
<html>
<header id="header-banner"></header>
<style>
#header-banner {
width: 100%;
height: 0;
padding-top: 20.83%;
background: url("../img/header.jpg") no-repeat;
background-size: contain;
}
</style>
</html>
Related
I am trying to figure out why I can't see the image.
I am trying to add an image in the <li class="logo">PufferFish Divers</li> line, but I just see a black space.
When I inspect it, it is there, but I cannot get to see it.
header .logo a {
background-image: url("https://www.dropbox.com/s/ie6qd07mbmonjs1/sea10%20copia.jpeg?dl=0") ;
background-size: 300px;
display: inline-block;
height: 80px;
width: 300px;
text-indent: -999999999px;
}
Here's a codepen link.
here is the code. you can try this out. and you can refer enter link description here here for more details.
<html>
<head>
<style>
body {
background-image: url("https://uccf62af6085e46bfa876477ddd6.previews.dropboxusercontent.com/p/thumb/ABP0IK4DkxiZRD-oqNgvuM_MQx2MKut92ZE3MOLBMM2_aHYJ1Oz_fFc8c8B-zQ0R6PWpG8SlVUKL-hDW8HukOeP_nXbuZvH1XDQpMMEpDEFZgc7He81YmTuC1hE1V953GsqDwB9mZoR22b1VrWVxf0gmDyU8wv1x05cMbY8JDDqayTLMS0-S0_3mf7ELwNXB-FEacQjlV3KmTw82mpj1rx_N-rN9V4gT7-284Zo-A3_cBQ0ursYlyJ563tPMvzed852kpQJ5vp9Dwpf1mkEh1_xZAizECUuPvDZGc39xweogbwP_2blHPFW6wsu1xoffpb7Z3PPNz4tb2-EEcgJaT3SdfFVjHzXSoB0e4hF3Dy9dpbNcdTzmhDVp5rt6YKtbMCqBP2WNepm_EVDWH_VH4kW5/p.jpeg?fv_content=true&size_mode=5");
background-color: #cccccc;
background-repeat: no-repeat;
background-size: 300px 100px;
}
</style>
</head>
<body>
<h1>The background-image Property</h1>
<p>Hello World!</p>
</body>
</html>
There is mistake in the image's url. It was just a letter, but made it impossible to reach.
so i have this header-task class but for some reason the background-image wont show up but when i click the url in visual studio code its show me the image from the url. does anyone know what's the problem to my code here? thanks
.header-task{
background-image: url("..\image\nightlandscape.jpg");
background-repeat: no-repeat;
background-size: 100% 200%;
height: 120px;
position: relative;
}
here is the picture of my visual studio code when I click the URL image
I did some digging but personally I do not have the environment to test it out. So you might need to check it for yourself.
Can you please try the below:
.header-task{
background-image: url("static(image/nightlandscape.jpg"));
background-repeat: no-repeat;
background-size: 100% 200%;
height: 120px;
position: relative;
}
If your STATIC_URL is '/static/' (I believe that is in settings.py), this will be rendered as:
.header-task{
background-image: url("/static/image/nightlandscape.jpg");
background-repeat: no-repeat;
background-size: 100% 200%;
height: 120px;
position: relative;
}
Another possibility:
.header-task{
background-image: url('{% static 'nightlandscape.jpg' %}') or url('{% static "/img/nightlandscape.jpg" %}')
background-repeat: no-repeat;
background-size: 100% 200%;
height: 120px;
position: relative;
}
but for that I think you would need to load static files first: {% load static%} in your HTML and then load the stylesheet.
<head>
<style>
{% include "path/to/my_styles.css" %}
</style>
</head>
Possibly simply changing url("..\image\nightlandscape.jpg") to url("../image/nightlandscape.jpg")
It's working for me:
background-image: url( '/static/images/moon.jpg');
Happy coding.
I do have a similar use case, I call the background image in the CSS file as below
.class-name{
background-image: url('../img/img.png');
}
And I have a folder structure which corresponds as:
Static
Css
file.css
Img
img.png
It might be the folder structure that it can't resolve.
When I put the following into a div in the main body, this WORKS:
<div style="display: block; width:100%; height: 100%; min-height: 100vh; background-color: #FFFFFF; background: url(./images/pic.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed;">
BUT when I use CSS is DOES NOT WORK:
<style type="text/css" media="all">
.myMainDiv {
width:100%;
height: 100%;
min-height: 100vh;
background-color: #FFFFFF;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
</style>
<div class="myMainDiv" style="display: block; background: url(./images/pic.jpg);">
It seems to be going wrong, because I need a different pic for each background and then this results in the background-repeat etc being ignored. (Note: also different divs will have different display values, either block or none, so they need to be separately stated as well, but that is not the problem.)
Anyone know why and if there is a workaround.
Hmm. Seems you are overwriting your CSS. Using backgorund: url('./images/pic.jpg') as an inline style is the problem. You are overwriting all of your CSS properties (background-position, background-repeat, etc...) with this inline style. Replace backgorund: url('./images/pic.jpg') with backgorund-image: url('./images/pic.jpg').
I am new to CSS and am looking for some help with the following.
I have an HTML page with the below structure at the beginning of its body.
Inside the body I have a form with the class "bgBanner".
The idea with this is to set a background image only for the form but not for the rest of the body.
When viewing this on the desktop everything looks ok but when viewing it on a mobile / smartphone everything gets cut off at the bottom edge of the screen and I don't get a scrollbar there.
Since I am new to this I guess one of my styles might overwrite another or I am using "overflow" the wrong way.
Can someone help me with this ?
My HTML:
<!-- ... -->
<body>
<div class="wrapper">
<?php require_once("includes/menu.php"); ?>
<section id="main">
<form id="frmLogin" class="bgBanner">
<!-- ... -->
My CSS:
html, body {
height: 100%;
overflow: auto;
width: 100%;
}
body {
margin: 0;
padding: 0;
}
form, #main {
height: 100%;
overflow: auto;
}
#main {
border: 1px solid #ccc;
border-radius: 5px;
margin-left: 8.33%; /* col-1 */
margin-right: 8.33%; /* col-1 */
overflow: hidden;
}
.bgBanner {
background-image: url('../images/banner-M.jpg');
background-position: left top;
background-repeat: no-repeat;
background-size: cover;
min-height: 600px;
}
Many thanks for any help with this,
Mike
I got this to work by removing the overflow from form and #main + by changing the CSS for html and body as follows:
html, body {
height: 100%;
width: 100%;
}
html {
overflow: auto;
}
This is working for me now on both desktop and mobile.
However, since I am new to this it might not be the best approach so if there are any comments please let me know.
Thanks !
Use #main {overflow-y: scroll}
I have an issue with background-position in mobile safari. It works fine on other desktop browsers, but not on iPhone or iPad.
body {
background-color: #000000;
background-image: url('images/background_top.png');
background-repeat: no-repeat;
background-position: center top;
overflow: auto;
padding: 0px;
margin: 0px;
font-family: "Arial";
}
#header {
width: 1030px;
height: 215px;
margin-left: auto;
margin-right: auto;
margin-top: 85px;
background-image: url('images/header.png');
}
#main-content {
width: 1000px;
height: auto;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
padding-bottom: 15px;
background-image: url('images/content_bg.png');
background-repeat: repeat-y;
}
#footer {
width: 100%;
height: 343px;
background-image: url('images/background_bottom.png');
background-position: center;
background-repeat: no-repeat;
}
Both "background_top.png" and "background_bottom.png" are shifted too far to the left. I've googled around, and as far as I can tell, background-position IS supported in mobile safari. I've also tried every combination of keywords ("top", "center", etc.), px, and %. Any thoughts?
Thanks!
Update: here's the markup in the .html file, which displays the design & layout fine in other browsers: (I also updated the above css)
<html lang="en">
<head>
<title>Title</title>
<link rel="Stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="header"></div>
<div id="main-content"></div>
<div id="footer"></div>
</body>
</html>
Both background images are very wide (~2000px) so as to take up space on any sized browser.
P.S. I know that there's probably a few more efficient CSS shortcuts I could be using, but for now I like having the code organized like I have it for visibility.
The iPhone/Webkit browser cannot center align background images when placed in the body tag. The only way around this is to remove the background image from your body tag and use an additional DIV as a wrapper.
#wrapper {
background-color: #000000;
background-image: url('images/background_top.png');
background-repeat: no-repeat;
background-position: center top;
overflow: auto;
}
<html lang="en">
<head>
<title>Title</title>
<link rel="Stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="main-content"></div>
<div id="footer"></div>
</div>
</body>
</html>
It'll work with
background-position-x: 50%;
background-position-y: 0%;
and still add
background-position: center top;
for other browsers.
Apparently, when you "scroll" on an iPhone / iPad, you're not scrolling the page in the same way as you do in a desktop browser. What you're doing is more like moving the whole page within a viewport. (I'm sure someone will correct me if I'm using the wrong terminology here.)
This means that background-position: fixed is still "supported" but has no real effect, since the whole page is moving within the viewport rather than the page content scrolling within the page.
Create a wrapper ID to place in the body, then include the following CSS:
#background_wrap {
z-index: -1;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: cover;
background-image: url('../images/compressed/background-mobile.png');
background-repeat: no-repeat;
background-attachment: scroll;
}
Just ensure that none of your content goes within the div otherwise the whole page will be fixed with no scrolling.
I have this problem and I'm addressing it by getting rid of my fixed footer using a separate style as mentioned here: How to target CSS for iPad but exclude Safari 4 desktop using a media query?