I'm trying to display html elements (forms, text, etc) on an image, which has been made transparent with gimp. But whatever I tried, the content is hidden by the image.
I've changed the page's background color just to be sure the browser wasn't changing the transparent part to white for some reason, and it does not.
I also have tried to play with the z-index property but this didn't work.
On reloading the page, I can see the text displaying correctly, but then the image displays and overlays it.
#foo{
position: relative;
}
#foo img{
width: 20%;
height: 20%;
}
#bar{
position: absolute;
}
<!DOCTYPE html>
<body>
<div id='foo'>
<img src='my_img' />
<div id='bar'>
<!--This is where I want to write what will be displayed on the transparent image.-->
</div>
</div>
</body>
I didnt find any similar situations, neither here neither on other websites so any suggestion is welcomed.
Edit: Actually I set the top and left CSS properties and it's now working fine.
Have you considered background-image?
#bar {
background-image: url('/path/to/myimg.jpg');
background-size: contain;
background-position: center center;
}
Related
I am trying to put an image with the container but I do not the image's transparent background to be shown. I want it to be with the green.
#container {
background-color: green;
height: 70px;
display: flex;
}
<div id="container">
<img src="https://turbologo.com/articles/wp-content/uploads/2018/03/prozrachniy-logo-1-1280x720.png" alt="LOGO">
</div>
Sadly, it seems your problem is that your logo doesn't have a real transparent background.
The checkered boxes are, in fact, part of the image.
If you use an image that is transparent, such as the stackoverflow logo, you will see that your code will work just fine.
https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png
I have some HTML/CSS that I came up with, I have centered the page and attempted to get an image either side (or behind it) of the centered page but I'm not sure how.
Sorry for the bad explanation, here is my code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("/images/background.png")
}
#wrap {
width: 700px;
margin: 0 auto;
}
hr.one {
margin-top: 5px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<title>ItzJavaCraft | Home</title>
<div id="wrap">
<h1 align="center">ItzJavaCraft</h1>
<hr class="one">
<p>More coming soon...</p>
</div>
</body>
</html>
I want to be able to get the background.png to the left, and the right of the page.
P.S: Sorry of I have done anything incorrect here, I am new.
Any help would be great!
Thanks,
—ItzJavaCraft
Here is a way to get one image the fullwidth and height of the screen in the background.
body {
background: url("http://placehold.it/400x300/ff66cc/ffffff&text=icon1") no-repeat center center fixed;
background-size: cover;
}
#wrap {
width: 700px;
margin: 0 auto;
}
hr.one {
margin-top: 5px;
margin-bottom: 5px;
}
<title>ItzJavaCraft | Home</title>
<div id="wrap">
<h1 align="center">ItzJavaCraft</h1>
<hr class="one">
<p>More coming soon...</p>
</div>
There's one simple error causing the background to not display: the relative URL should not start with "/" (unless, of course, you want to use an absolute path and are using a system where / refers to your root directory). Additionally, you'll need to use the background-size or background-repeat property to make the image fill up the entire page.
If you want your "wrap" element to remain white, you can just add a background-color to that element (adjusting the size of the element as necessary to get the coverage you're looking for).
The background-image property sets one or more background images for an element. The background of an element is the total size of the element, including padding and border (but not the margin). By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.
Tip: Always set a background-color to be used if the image is
unavailable..If you want to provide a position in a background image,
you can use some properties like:
Property:
background-position
Also, you can use a shorthand for that like jack blank code, but if this is hard to use for you, you can make it for separate like:
Full background image to your page:
background-position: cover;
Or if you want to change the position, you can use center, left, right, and top
For example:
background-position: center top;
or
background-position: left center;
or
background-position: top center;
etc.
You can learn about this property with more examples here:
http://www.w3schools.com/cssref/pr_background-image.asp
I have two background colors. One part is grey and the other one is white. The grey part of the background only covers a little part of the background, and rest is covered by white. Now I want to add an image as my 'logo', which should be on the grey part of the background. The image is currently underneath both backgrounds, and I just can't figure out how to get the image to be in front of the backgrounds.
<style type="text/css">
#grey-bg {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 25%;
background-color: grey;
}
body
{
background-color:white;
}
</style>
</head>
<body>
<div id="grey-bg">
<body bgcolor="grey">
</div>
<center><img src="http://img2.wikia.nocookie.net/__cb20110818145752/prototype/images/thumb/6/64/Prototype_-_Logo.png/660px-Prototype_-_Logo.png alt="Prototype"></center>
I hope this is understandable. I am quite new to this, and tried to be as as clear as I could.
Any help would be very appreciated!
Just move the image element inside the div with the gray background.
<div id="grey-bg">
<center><img src="http://img2.wikia.nocookie.net/__cb20110818145752/prototype/images/thumb/6/64/Prototype_-_Logo.png/660px-Prototype_-_Logo.png" alt="Prototype" /></center>
</div>
Fiddle: http://jsfiddle.net/LcDTS/
You should also avoid the center tag and use CSS instead.
A good example of what I'm trying to do is Fancy: http://www.fancy.com/
If you hover over an image of a post, the background gets dark (to a percentage) and a button appears in the front.
I want to do the same but with a SHARE button. I place the image as an img and the SHARE button as a background. However, I cannot figure out how to darken the image without darkening the SHARE button as well.
Here's my HTML code:
<div class="src">
<img src="image.jpg" />
</div>
My CSS Code:
div.src{
width:100%;
height:100%;
background:url('icon-share.png') center center no-repeat;
opacity: 1;
}
div.src img{
width: 500px;
min-height: 200px;
opacity: 0.2;
}
Can you help?
The width is always 500px but the height is variable (min-height of 200px). I'd also like to darken the image instead of applying opacity but that's not a hard problem I think.
EDIT: Of course clicking on the entire image will open the share dialogue. The floating SHARE button is just to inform the user that he's going to share it.
If we're talking pure html and css, you could insert another <div> or even an <a> inside the image holder above the image.
a.share {
position:absolute;
width:100%; height:100%;
background:url(path to icon) rgba(0,0,0,0.75);
background-repeat: no-repeat;
background-position:center center;
}
I want to stack one division on top of another each with different background. the background, ofcourse will be transparent (.png). This is to recreate an effect of a pattern on an image and avoid loading an entire 1366 x 768 image.
my html is somewhat like this
<body>
<div id="firstLayer">
<div id="secondLayer">
<div id="mainContent">
main page content
</div>
</div>
</div>
</body>
I have a radial gradient for the body, the #firstLayer contains the main logo, and the #secondLayer must consist the transparent pattern.
my first try at css was somewhat like this
#secondLayer{
background: url("../images/crtPattern.png") repeat scroll 0 0 transparent;
}
But the pattern doesnt show up at all. How can i bring this #secondLayer on top of #firstLayer but just below the #mainContent?
You need to give width and height to #secondLayer like this Demo
#secondLayer{
background: url("../images/crtPattern.png") repeat scroll 0 0 transparent;
width: 100%;
height: 100%;
}
Are you trying to do this -
#firstLayer{ background: red; height: 500px; }
#secondLayer{ background: green; opacity: 0.6; filter:alpha(opacity=60); height: 300px; }
Demo
Width and height are definitely required if you have no DIV content. If that doesn't fix the problem for you:
Check image paths, can you load the same image using the same image path in an IMG tag?
Is your stylesheet inline or loaded as a separate file - this will affect relative paths to the image file.
Is your webserver case-sensitive? Does the case of your path match the image?
Hope this helps.