I have a div with more buttons and I cannot add an image to it.
Html:
<div class="menu_border" style="height: 460px; width: 290px;">
</div>
CSS:
.menu_border {
float: left;
border: 5px groove;
margin-left: 70px;
text-align: center;
background-image:url('images\generale\bkgmenu.jpg');
}
My css and source codes are in the main folder. There is the folder images->generale and the images. I've tested the path, is correct. I've tried to add the image as normal <img> and it worked.
It does not work as background.
ur code needs to change like this
background-image:url('images\generale\bkgmenu.jpg');
to
background-image:url('images/generale/bkgmenu.jpg');
image will taken this format
Related
I would like to add an image to my header background, I tried this, but didn't work.
What am I doing wrong?
div.cabecalho {
padding: 20px;
font-size: 250%;
text-align: center;
background-image: url(https://via.placeholder.com/800/ff0000);
vertical-align: middle;
color: #ffffff;
border-bottom: 30px solid #0f4098;
width: 100%;
align-items: center;
}
div.cabecalho span {
margin-left: 20px;
}
img {
object-fit: cover;
}
<div class="cabecalho">
<img src="https://via.placeholder.com/320x300" width="320" height="300">
<span>Desempenho do <strong>PIB</strong> no terceiro trimestre de 2021</span>
</div>
Judging by text-align: center;, vertical-align: middle, and align-items: center; I'm going to take a wild guess and assume you want the background image centered. You can use background-image: center; in your CSS. background-size: cover; to expand the entire image throughout the header. align-items: center; generally only works with flex or grids
Check here to learn more about background properties.
div.cabecalho {
padding: 20px;
font-size: 250%;
text-align: center;
background-image: url(https://via.placeholder.com/800/ff0000);
background-position: center;
background-size: cover;
color: #ffffff;
border-bottom: 30px solid #0f4098;
width: 100%;
align-items: center;
}
div.cabecalho span {
margin-left: 20px;
}
img {
object-fit: cover;
}
<div class="cabecalho">
<img src="#" width="320" height="300">
<span>Desempenho do <strong>PIB</strong> no terceiro trimestre de 2021</span>
</div>
Your css and html looks like it will work. And in fact, when I tried it myself with copy and paste, but changing out the images, it did work. It may be an issue with the path of your image files. Try navigating directly to them in your browser to see if they display without issue.
Edit: After posting this, the original question was edited to replace the author's image paths and names with placeholders. This would appear to confirm my above statement, as using "run code snippet" with the placeholder images works. Thus the issue still appears to be with the images in use. Perhaps the path is incorrect or perhaps the images are not located there.
Both images are being displayed on my end.
The 800x800 can only be seen in a small screen.
Set your height to 100vh for example and you'll be able to see it.
You may need to adjust the width of your image to fit within your header container.
Also please inspect your css img selector. Even if you remove it, you code will work as img {
object-fit: cover;
} is not working. Your code is applying the width you've set on your html.
I have different images on my website, and some of them (PNG images) have a strange grey border around the text part of image, like this:
https://imgur.com/a/yDtM4
The text is inside the image, not separated.
The css/html code of the image is:
#bor_panel {
border-radius: 12px;
border: 2px solid #287396;
padding: 20px;
width: 170px;
height: 170px;
display: flex;
}
<div id="bor_panel">
<img src="images/raro_page/Ampia_Connettivita_B.jpg" id="raro_panel_connettivita" alt="raro robot connettivita" />
</div>
Any idea? It seems a normal img tag...
------EDIT------
This is the original image:
https://imgur.com/a/P9LVm
It seems ok
There is an issue in your image. I opened your original image in the photoshop and found this after zooming the image. There is an gray space in your image around the text.
I have edited your image in photoshop and make a snippet below. Now there is no border.
#bor_panel {
border-radius: 12px;
border: 2px solid #287396;
padding: 20px;
width: 170px;
height: 170px;
display: flex;
}
img{
width:126px;
height: 126px;
margin: auto;
}
<div id="bor_panel">
<img src="https://i.stack.imgur.com/NdgFO.jpg" id="raro_panel_connettivita" alt="raro robot connettivita" />
</div>
It is strange. It is a part of the image you are using. Try using some image editing application to remove that border. It doesn't seem like its due to CSS or HTML
.d1 {
background-color: red;
text-align: center;
}
<div class="d1">
<img src="http://www.aliceseelywholesale.net/wp-content/uploads/ADB101-DAISY-CUTOUT-NARROW-LINK-BRACELET-300x100.jpg">
</div>
I use the above simple code to display an image in the middle a div. Code works good however when I resize the window below the width of the image, the border/div doesn't cover the image... Is there a way to fix this? Ty
.d1 {
background-color: red;
}
.img{
display: block;
width: 100%;
margin: 0px auto;
}
Treat the Image as a block content not as inline-element.
I hope this helps.
If you want to use a backgound image for your <div> I suggest you set the image as a background-image for your div, and remove your <img> element.
This will save you from using an addition element and also fix your problem:
.d1 {
width:300px;
height:100px;
background-color: red;
text-align: center;
background-image: url(http://www.aliceseelywholesale.net/wp-content/uploads/ADB101-DAISY-CUTOUT-NARROW-LINK-BRACELET-300x100.jpg);
background-size:cover;
}
<div class="d1">
</div>
I am trying to figure out how to add a background that extends to the edges of the page no matter what the size, like on the website here http://www.wisemanpanel.co.nz/
And I'm talking about this particular area that is highlighted in green
I've been looking at the source code and I can't find anything specifically for that part, also have tried right click -> inspect but still didn't find much, perhaps I have poor research skills.
I would just like a basic example of what the html/css would look like please if anyone could provide it?
It's simply a background image applied to the tag <body> which repeats horizontally (background-repeat: repeat-x;)
Just right click->inspect-> body tag and you will see :)
If you inspect their code, you will see that their <body> has a background-image that is 10px (but could have also been 1px) wide and that repeats horizontally :
http://www.wisemanpanel.co.nz/uploads/images/bg_repeat.png
It's an old trick I have used a lot too. Consider this very simple jsfiddle using the very same image :
HTML:
<div id="content">
<div id="top">
TOP BAR
</div>
<div id="middle">
Content !!
</div>
</div>
CSS:
#top {
height: 50px;
line-height: 50px;
background: yellow;
width: 70%;
margin: 0 auto;
text-align: center;
padding: 20px;
}
#content {
width: 100%;
background: url("http://www.wisemanpanel.co.nz/uploads/images/bg_repeat.png") repeat-x;
}
#middle {
width: 70%;
margin: 0 auto;
height: 600px;
background: #fff;
text-align: center;
padding: 20px;
}
My problem is fairly simple but has me really stumped.
(The RHS pic is the problem!)
I have a thumbnail with the following css:
float: none;
margin-right: 0;
display: block;
and to the right of that I have some text with the following css:
position: relative;
text-decoration: none;
text-indent: 0;
Now this works great! However, when the user resizes the window the text jumps below the thumbnail which I don't want (I'm using a responsive website)! How can I prevent this happening the text behaving like this?
I have been playing around with it for ages and can't solve this problem:(.
You can add float left attribute to your image and span text, and add to a margin left to your text
.box {
width: 210px;
vertical-align: text-top;
display: table-cel
}
.box img {
float: left;
width: 100px;
height: 100px;
}
.box span.text {
float: left;
width: 100px;
box-sizing: border-box;
}
Can you view an example in jsfiddle: here
As per my understanding, the reason might be:
There may be some float left given to the thumbnail image somewhere
inside the style written for lower screen sizes. The best
thing you can do is, inspect using firebug or something and check
whether any float left is given to the thumbnail image. If so, remove that, or give it as
float as none.
If you are ok with having the entire text below the image when the screen is resized, you can make use of clear: both for lower screen size, which has to be given the text div.
If you could give a link to review, it will be easy to tackle the real problem. Hope my solution helps. Thank you :-)
This appears to do what you want:
<html>
<head>
<style>
img {
float: left;
width: 40px;
height: 40px;
border: 1px solid gold;
margin-left: 5px;
}
.text {
margin-left: 50px;
}
.container {
width: 150px;
border-left: 3px solid red;
}
</style>
</head>
<body>
<div class="container">
<img>
<div class="text">This should stay aligned and not go under the thumbnail.</div>
</div>
</body>
</html>