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.
Related
I've got this example from w3school.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper.gif");
display: flex;
align-items: center;
background-size: 705px;
background-repeat: no-repeat;
background-position: 95% 50%;
}
</style>
</head>
<body>
<h1>The background-image Property</h1>
<p>Hello World!</p>
</body>
</html>
What I want to do is to add some border around the image which position has been changed by background-position property.
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-image
Try this:
<!DOCTYPE html>
<html>
<head>
<style>
section{
position: relative;
}
div {
background-image: url("paper.gif");
display: flex;
align-items: center;
background-size: 705px;
background-repeat: no-repeat;
background-position: 95% 50%;
position: absolute;
height: 600px;
width: 700px;
border-bottom: solid;
border-left: solid;
top: 0;
right: 0;
}
</style>
</head>
<body>
<section>
<div><div/>
<section/>
</body>
</html>
It will look like this in the "Try It Editor" on W3Schools website:
First of all as you know you can add border; the property border is a shorthand it will apply a border to all sides, so go for border-bottom and border-left.
With this said you can use the :after selector to put any kind of styles or effects such a responsive animation, motion transitions, borders > glow borders or better yet borders with neon glow blurry effect.
If you are interested on going deep with these kind of animations i would suggest you to try a library specialized on animation, such as anime.js or framer-motion.
Actually, I thought background property in css is very easty to learn.
But now image sprite is annoying me.
<style type="text/css">
body{
background-image: url("../../Images/tulip.gif");
background-repeat: no-repeat;
background-attachment:fixed;
color:#665544;
padding:20px;
}
</style>
<body>
<h1>Planting Guide</h1>
<h2>Magnolia</h2>
<p>some long text</p>
</body>
In this case, the background-position property is used to describe from where
the background-image should be displayed. It is quite easy to understand.
<style type="text/css">
a.button{
height:36px;
background-image: url("../../Images/button-sprite.jpg");
text-indent:-9999px;
display: inline-block;
}
a#add-to-basket{
width:174px;
background-position: 0px 0px;
}
a#framing-options{
width:210px;
background-position: -175px 0px;
}
a#add-to-basket:hover{
background-position: 0px -40px;
}
a#framing-options:hover{
background-position:-175px -40px;
}
a#add-to-basket:active{
background-position: 0px -80px;
}
a#framing-options:active{
background-position: -175px -80px;
}
</style>
<body>
<a class="button" id="add-to-basket">Add to basket</a>
<a class="button" id="framing-options">Framing options</a>
</body>
But in this code, background-position is used to display a part of the image.
I don't understand why and how??? I understand background cannot move to bottom
or right because a tag is not so big as body tag.
https://www.w3schools.com/cssref/pr_background-position.asp
but w3schools says background-position sets the starting position of a background image. That doesn't say this property can display a part of image.
Can somebody explain me?
I at least got the following to render the image, but when the window is resized past a certain point: part of the image gets cut off.
#header {
background-image: image-url('my_header.png'); #image-url is a helper in rails
background-repeat: no-repeat;
height: 100px;
background-size: 100%;
border-radius: 1em;
}
And then showing how I specify the image at the top of the body in application.html.erb:
<body>
<div id="header"></div>
</body>
What I want to happen is for the image to scale proportionality but not get cut off. I do not want any specific height set. I want it to automatically scale as needed (however, I wasn't able to get the image to render unless I specified the height with px).
#Pangloss deserves recognition for providing a fantastic answer at this jsfiddle which he referenced in the comments.
Here is his css:
#header {
background-image: url('http://i.imgur.com/zOZVQaf.jpg');
background-repeat: no-repeat;
background-size: contain;
border-radius: 1em;
border: 1px solid blue;
}
#header img {
display: block;
visibility: hidden; /*hidden but reserve the space*/
width: 100%;
height: auto;
}
And the html:
<div id="header">
<img src="http://i.imgur.com/zOZVQaf.jpg">
</div>
#Pangloss provided this answer in the comments. If/when he posts an answer to this question, I will switch it over to his answer.
My web page uses a full page stretch background image. My problem is that the background image seems to be covering the top 10px banner/header I am trying to add in the form of a repeating background image (so I can use CSS opacity). Here's the full page:
<html><head>
<style type="text/css" media=screen>
body{
margin: 0px;
color: #000;
font-family: helvetica, times;
font-size: 14px;
}
#bg {
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}
#banner{
background: url('images/banner2.gif');
background-repeat: repeat-x;
top: 0;
left: 0;
width: 100%;
padding:50px;
text-align: center;
}
</style></head>
<body>
<img src="images/background.jpg" id="bg">
<div id="banner">
Banner Test Text
</div>
</body>
</html>
I have tried adding z-index but to no solution. Any input for what I'm doing wrong is hugely appreciated. Please note that this implementation of the full page background image is the best I have achieved with my image, so it'd be great if a solution to accommodate that.
Ah, managed to get it myself. For any future readers of this, all I needed to do was add
position:absolute;
To the #banner code.
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?