Before posting it over here, I have done thorough research work on my question but I haven't found any suitable answer to it.
How do I post an background image in a textbox using CSS?
Am using IE11.
The below is the code which am using
<a href="#">
<div id="imagecontainer"></div>
<style>
#imagecontainer {
background-image: url("content\A.png") no-repeat;
background-size: cover;
background-size: contain;
width: 10%;
height: 10%;
border: 1px solid;
}
I have tried many possibilities to sort it out but am unable to. The box is going to be displayed but not the image in the backgorund in my code.
Can any of you suggest me whats wrong in it please.
if you are trying to reference a url in a different directory use the following:
#imagecontainer {
background-image: url('Images/example.jpg') no-repeat;
background-size: cover;
background-size: contain;
width: 10%;
height: 10%;
border: 1px solid;
}
Try like this: Demo
input {
padding: 9px;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
width: 10%;
height: 10%;
border: 1px solid;
background: #FFFFFF url('http://nettuts.s3.amazonaws.com/584_form/bg_form.png') left top repeat-x; /* make sure about the image path you mentioned is right */
}
And I didn't saw any textbox code in you HTML. As you mentioned, I showed simple example for textbox with background image. Hope this is what you want.
Related
I am working on a modal wherein there's an image background. Now, the image is not filling the entire div. Here's what I currently have in my css:
CSS:
.modal {
border-radius: 10px;
min-width: 65vw;
min-height: 40vh;
border-width: 5px;
border-style: solid;
border-color: var(--secondary);
background: url("../../../assets/cloudy.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
HTML:
<div class="modal"></div>
Whenever I replace the background with a color, it works. Here's what it currently looks like with background image vs with color:
I've tried changing background-size to contain and 100% 100%. It didn't work.
Is it a problem concerning the image? Because the image is very long. 1942 × 478 to be specific. Thanks in advance!
i have tried most of the pics on my laptop and it seems to work just fine.
.modal {
border-radius: 10px;
min-width: 65vw;
min-height: 40vh;
border-width: 5px;
border-style: solid;
border-color: var(--secondary);
background: url("https://media.mnn.com/assets/images/2018/08/CollectionOfCloudsAgainstABlueSky.jpg.653x0_q80_crop-smart.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="modal"></div>
</body>
</html>
if you put a link of the image in code instead of the local file name i can help. but maybe its a png problem because the top and bottom could be see trough. (also i cant comment so this is the best way to communicate, sorry.)
I have a PHPBB theme I am starting to construct. In the CSS file, I have three items--a body and two divs--with background images. The background images for the divs have ceased working in all browsers.
The site with the theme presented is here: https://www.tarazedi.com/index.php?style=7
The problem images are here: https://www.tarazedi.com/styles/wTcFresh/theme/images/site_banner.png
The CSS is located in wTcFresh/theme/.
The images are all in the same locations but there seems to be a pathing issue but is working very strangely. I have tried using both relative and absolute URLs. I have tried url(x);, url('x');, and url("x"); and also changing the other background elements. In no case have the banner and logo images started working, but the body image works fine despite being in the same place and using the same syntax. When I inspect the computed styles of the divs in Chrome the image will show as the full absolute URL correctly but the relative link links instead to tarazedi.com/images/site_banner.png which returns a 500 error because that URL is, obviously, useless. In Edge and Firefox the inspector shows the correct link to the image but still does not render.
I have cleared browser and site-side caches with each attempt I make to fix it.
I am baffled. What am I missing?
body {
color: #CCCCCC;
background-color: #000000;
background-image: url("images/bg.jpg");
background-attachment: fixed;
}
.headerbanner {
border: #009900 solid 4px;
border-radius: 40px;
background-image: url("images/site_banner.png");
background-attachment: fixed;
background-position: right;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
}
.headerlogo {
border: #003300 solid 4px;
border-radius: 36px;
overflow: hidden;
background-repeat: no-repeat;
background-image: url("images/site_logo.png");
background-attachment: fixed;
background-position: left center;
vertical-align: middle;
}
To achieve expected result,adjust background-position and it is not issue with the background-image
1.Remove background:position to see the difference
Editing it thusly fixed the problem and it now renders correctly. Thank you very much!
.headerbanner {
border: #009900 solid 4px;
border-radius: 40px;
background-image: url("images/site_banner.png");
background-position: right;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
align-items: center;
}
.headerlogo {
border: #003300 solid 4px;
border-radius: 36px;
background-image: url("images/site_logo.png");
overflow: hidden;
background-repeat: no-repeat;
background-position: left;
align-items: center;
}
I am having trouble getting a background image to show in a div and can't for the life of me see why...
This is the structure that I have:
Folder
\style.css
\index.html
\Images
\bookone.jpg
I want the bookone.jpg file to be the background of a div.
So the CSS path would be Folder/style.css and the image path is Folder/Images/bookone.jpg. I have the below code in my html and css file but I get nothing when previewing it.
/* CSS */
.book {
height: 300px;
width: 300px;
margin: 0px;
padding: auto;
border: 1px solid #000;
}
#bookone {
background: url(..\Images\bookone.jpg) ;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
<!-- HTML -->
<div id="bookone" class="book"></div>
You should use slash (/) and not backslash (\).
You should make sure the image is in the correct path (relatively to the current css/html file).
If the images exists in the same location of your css file (or your html file) you shouldn't use the .., since it actually tells your browser to search for that image in the upper-folder.
This is the final css code you should probably use:
.book {
height: 300px;
width: 300px;
margin: 0px;
padding: auto;
border: 1px solid #000;
}
#bookone {
background: url(Images/bookone.jpg) ;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
just writing my comment as answer as this help OP to solved the problem
try url(Images/bookone.jpg) in ur css file
It appears like the image you want have as a background is in another folder away from where the CSS is. I suggest you assign the background image from the HTML code. Use the forward slash (/) and not backslash (\).
E.G
<div id="bookone" class="book" style="background: (url('/myimage/bg.jpg')"></div>
or on css
.book {
height: 300px;
width: 300px;
margin: 0px;
padding: auto;
border: 1px solid #000;
}
#bookone {
background: url(./images/bookone.jpg) ;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
I assigned a background image to a section using css and the image only shows up in live preview in brackets. Is this supposed to happen or I did something wrong. Here's The Code:
background: url(/img/background.jpeg) center center no-repeat fixed;
background-size: cover;
I changed the path to:
background: url(../img/background.jpeg) center center no-repeat fixed;
background-size: cover;
putting the two dots worked for me!!
Maybe you can try something like this-
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;}
<img src="example.jpg" alt="example">
Or this-
body {border-style: groove;border-width: 3px; border-color: Black;
width:1300px; padding: 25px; background-color: Aqua;
background-image: url("NSIC-logo1.png");
background-repeat:no-repeat;background-position:50% 10% }
This is a table (tag)
Where first column holds username
second column holds content for this particular topic
I've made a css for the table and definition within should set the padding to 0.
However, I noticed padding: 0px 0px; has no effect
Browser: Chrome
CSS for the topic
.TOPIC_STYLE {
border-collapse: collapse;
border:0px solid black;
padding:0px 0px;
font-family: '华康少女文字 - Kelvin';
font-size: 18px;
color: #819FF7;
}
Here is the code for table: <table class=TOPIC_STYLE align=left>
2016-08-13 - Complete set of code is lost along with my old laptop.
Goal: Eliminate the white space in the red circle.
Other CSS I have for table:
.TOP_LEFT {
background-image: url(top_Left.png);
background-repeat: no-repeat;
}
.TOP_RIGHT {
background-image: url(top_Right.png);
background-repeat: no-repeat;
}
.VERTICAL_LEFT {
width: 150px;
height: 30px;
text-align: center;
background-image: url(vertical_Left.png);
background-repeat: repeat-y;
}
.VERTICAL_RIGHT {
width: 700px;
height: 30px;
background-image: url(vertical_Right.png);
background-repeat: repeat-y;
}
.BOTTOM_LEFT {
width: 150px;
height: 40px;
background-image: url(bottom_Left.png);
background-repeat: no-repeat;
}
.BOTTOM_RIGHT {
width: 700px;
height: 40px;
text-align: center;
background-image: url(bottom_Right.png);
background-repeat: no-repeat;
}
Solution:
Pictures was indeed used to create the border, which was unnecessary since CSS already provided border property for that purpose.
Therefore all related pictures can be shelved and use border property instead.
Similarly, border-left, right, top, bottom can also be used.
table {
border: 2px solid red;
}
Your background image isn't wide enough to cover all the space without repeating. For .TOP_LEFT, change background-repeat: to repeat-x; and edit a new image to be much taller and wider.
But if I were in your shoes, I'd just handle that effect as a border. Take off all of the background images and add these rules:
table { border: 2px solid blue; border-collapse: collapse; }
tr { border: 2px solid blue; }
Not sure why your class name has a dollar sign in front of it. Try this:
<table class="TOPIC_STYLE">
<table class="TOPIC_STYLE" align="left">
They should be look like this..Are you getting the same problem still ??