I don't know what is going on but it seems that the background image isn't loading.
test.html:
<div class="pToolContainer">
<span class="btn-pTool">
<a class="btn-pToolName" href="#"></a>
</span>
<div class="pToolSlidePanel"></div>
</div>
style.css:
.btn-pTool{
margin:0;
padding:0;
background-image: url(slide_button.png);
background-repeat:no-repeat;
}
.btn-pToolName{
text-align: center;
width: 26px;
height: 190px;
display: block;
color: #fff;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1em;
line-height: 32px;
}
By the way the image does exist in the folder of test.html.
Add "display:block;" in your .btn-pTool class
Use shorthand property for the background property and type the folder name where thje image had been located.
.btn-pTool{
margin:0;
padding:0;
background:url("../folder name/slide_button.png") no-repeat;
}
.btn-pToolName{
text-align: center;
width: 26px;
height: 190px;
display: block;
color: #fff;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1em;
line-height: 32px;
}
I faced this problem. My html was as below:
<th style="background-image:url('Image.png');">
</th>
I added " " as #shankhan suggested inside th and the image started showing up.
<th style="background-image:url('Image.png');">
</th>
In addition to display:block OR display:inline-block
Try giving sufficient padding to your .btn-pToolName and make sure you have the correct values for background-position
#TheBigO, that's not correct. Spans can have background/images (tested in IE8 and Chrome as a sanity check).
The issue is that the a.btn-pToolName is marked as display: block. This causes webkit browsers to no longer show the background in the outer span. IE seems to render it how the OP is wanting.
OP chance the .btn-pTool class to be display: inline-block to make it work like a span/div hybrid (take the background, but not cause a break in the layout).
I have tried your code and found that if we put background-image: url(image.png); in btn-pToolName and change color:#000000. it displays the image at background.
my test css:
.btn-pTool {
margin: 0;
padding: 0;
}
.btn-pToolName {
text-align: center;
width: 26px;
height: 190px;
display: block;
color: #000000;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1em;
line-height: 32px;
background-image: url(defalut.png);
background-repeat: no-repeat;
}
and test html:
<div class="pToolContainer">
<span class="btn-pTool"><a class="btn-pToolName" href="#">adad</a></span>
<div class="pToolSlidePanel"></div>
</div>
Hope this helps.
You have applied class "btn-pTool" to span which is an inline element... give display:block to it and also add some text inside the<a> tag and the see the result.
Also give a background color and background position as well to the image though default background position is there.. but try doing it this way
<span class="btn-pTool">
<a class="btn-pToolName" href="#"></a>
</span>
Try to add display:block to .btn-pTool, and give it a width and height.
Also in your code both tbn-pTool and btn-pToolName have no text content, so that may result in them not being displayed at all.
You can try to force come content in them this way
.btn-pTool, .btn-pToolName {
content: " ";
}
The code below works. Replace the text within the single quotes with your image name. If it is in the same folder, if not add ../foldername/'yourimagename' I hope that helps.
NOTE:
use of the single quotes by most of the programmers is not advised but I use it and it works. Also, if you would write a PHP you would appreciate what it can do i.e. add the background image automatically from the variable etc.
<html>
<head>
<style type="text/css">
.btn-pTool{
margin:0;
padding:0;
background-image: url('your name of the field');
height:100px;
width:200px;
display:block;
}
.btn-pToolName{
text-align: center;
width: 26px;
height: 190px;
display: block;
color: #fff;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1em;
line-height: 32px;
}
</style>
</head>
<body>
<div class="pToolContainer">
<span class="btn-pTool"><a class="btn-pToolName" href="#">Test text</a></span>
<div class="pToolSlidePanel">Test text</div>
</div>
</body>
</html>
The easy way is that, copy and past this background-image: url(../slide_button.png); instead of background-image: url(slide_button.png);
In such case we need to use ../ before path.
Either you need to give full path.
One other thing is that, in case before doing any change just clear the browser history and then refresh the page.
Use this one to add background---
background-image: url('images-path');
You can also add repeat or no-repeat function in it!
background: url('images-path') no-repeat 00;
<span class="btn-pTool">
<a class="btn-pToolName" href="#"></a>
</span>
That's empty. Try adding a non breaking space to give the link and span some contents:
<span class="btn-pTool">
<a class="btn-pToolName" href="#"> </a>
</span>
It's also worth noting that the CSS spec says that you can't give a span a background image because spans are not block elements. Put the background image code in the div's class style, or use <p> instead of <span>. Some browsers might let you put a background in a span, but not all will (perhaps older versions of IE).
1.Use this code in stylesheet
body {
background: URL("slide_button.png");
background-size: 100% 100%;
background-repeat: no repeat;
2.Put img and html file together in single folder
3.IF not worked try converting png file to jpg for that just upload pic on facebook and then download that pic from facebook it will automatically converted into jpg and while uploading tick mark private setting so that ur friends cant view that image
4.if still not work imform me..
Related
While making some buttons I've run into this issue where the empty spaces/margins beside the buttons are clickable, which is what I'm trying to get rid of now. I've been looking over similar posts that go over this kind of thing but I've had no luck in applying those answers to my code, and unfortunately my messing around with it hasn't helped a whole lot either. This thing is kind of driving me crazy at this point and any bit of help would be greatly appreciated :')
Here's the code itself:
button {
background-color: #edca6e;
border: none;
color: #523e5c;
padding: 8px 60px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 30px;
font-family: 'Lucida Console';
margin: 30px;
cursor: pointer;
}
<center>
<img src="https://picsum.photos/300/300" alt="logo" style="width:300px;height:300px;">
<!--portfolio, about, contact, misc.-->
<br><br><br>
<button>text</button>
<button>text</button>
<button style="margin:30px;">text</button>
<button>text</button>
</center>
If anything else needs to be clarified, please let me know :)
When u wrap your button with <a> tag, the whole component of button will be clickable (include the margin). Although it is not practicable to use <a> with <button>, still I have a solution that you can overcome your current issue.
To make the margin not clickable, you can apply the margin in <a> tag and move the display attribute from <button> style to <a> style, Kindly refer to following code:
CSS:
button {
background-color: #edca6e;
border: none;
color: #523e5c;
padding: 8px 60px;
text-align: center;
text-decoration: none;
font-size: 30px;
font-family: 'Lucida Console';
cursor: pointer;
}
a{
display: inline-block;
margin: 30px;
}
HTML:
<center>
<img src="https://picsum.photos/300/300" alt="logo" style="width:300px;height:300px;">
<!--portfolio, about, contact, misc.-->
<br><br><br>
<button>text</button>
<button>text</button>
<button >text</button>
<button>text</button>
</center>
Margin should be moved to a instead of button. As of now, button has some margin, which makes a has some redundant space.
And yeah, you shouldn't be using button inside a. Both are clickable.
A few days ago I started learning HTML / CSS in my spare time and programming my own test website. At some point I encountered a problem when I tried to visit my website on my smartphone. Here Here you can see that the Picture is shifted above the border.
Everything works fine on the desktop, but as you can see, it has moved on the mobile device. I tried several methods, but none of them resolved the problem. Since I just started, I have no other ideas.
I do not want to post all my code, so the problem is here
thank you in advance
Your problem is not only related to mobile I'm afraid.
That is what happens when you float, the container element loses its layout. To fix it you just need to give it back applying for example an overflow: hidden.
But I suppose you want to still have the img on the right of the Personal Data, for that you have to put the image inside the same container, applying the overflow: hidden.
Just like this:
/*SCHRIFTART*/
#font-face {
font-family: 'Levenim MT';
font-style: normal;
font-weight: normal;
src: local('Levenim MT'), url('ufonts.com_levenim-mt.woff') format('woff');
}
/*ALLGEMEIN*/
* {
margin: 0;
padding: 0;
}
/* CONTENT */
#PB-Bild {
float: right;
margin-top: 6px;
margin-right:7.5px;
}
#Information {
overflow:hidden;
height: 30%;
width: 98%;
border: 7px outset grey;
background-color:whitesmoke;
font-family: 'Arial Rounded MT';
padding-left: 5px;
color:darkblue;
}
.was {
font-size: 150%;
font-weight:900;
}
p.was::first-letter {
color:brown;
font-size:160%;
}
.was {
font-family:Arial;
color: black;
}
.uText {
font-family:Arial;
background-color:ivory;
font-size:120%;
}
<div id="Information">
<img id="PB-Bild" src="https://fakeimg.pl/300x350">
<p class="was">Name:</p>
Domenic Malz <br>
<p class="was">Alter:</p>
16 Jahre <br>
<p class="was">Geboren am:</p>
29.04.2002 <br>
<p class="was">Wohnort:</p>
Berlin <br>
<p class="was">E-Mail</p>
postfach#domenicmalz.de <br>
</div>
The issue you are bringing is known as responsiveness. There are many ways to make your website responsive, first thing I noticed when looking at your code, in your css you are making use of "px" values, they are pixel values meaning they are not scaling with the size of the screen. You should familiarise yourself with more responsive values such as "vw" and "vh" that do scale according to the size of the screen.
If you add a few properties to #banner2, you can ensure the background does not auto scale.
#banner2 {
…
background-size: cover;
background-position: center;
}
Is it possible to create a fancy text in HTML with the help of CSS only?
I am putting a link where you can see a better example of fancy text. https://www.ultimatebeaver.com/modules/fancy-text/
This is one neat CSS style that forces a background image to show through letters on the page.
You can simply put any background in the .knockout class in css given in fiddle, also set different font and style as required.
See the fiddle
.knockout {
background: url(https://media.istockphoto.com/photos/christmas-lights-defocused-background-bokeh-gold-blue-picture-id613518332?k=6&m=613518332&s=612x612&w=0&h=Own5MdgJXjNhFd0YUyED1UP3mQsHeNhfML9F-DQYdYw=) -80px -80px;
color: red;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-weight: bold;
font-size: 100px;
font-family: arial, helvetica;
width: 600px;
margin: 50px auto;
text-align: center;
}
body{
background: #444;
}
<div class="knockout">gaurav</div>
My problem is as follows: I replaced some items (navigation, footer) in my HTML-code by adding objects instead and loading them externally. Since I did that, I can't load background pictures into my 'collage' part of the website.
HTML: Stripped it off of everything not part of the problem (except for the content).
The container is just a wrapper for the whole thing. My website will contain a bunch of images in the middle that link to the appropriate websites and, on hover over, display a short description and a title.
.collage is used to style the overall frame of the element
id will be used to add the background images (worked before!)
HTML-Part:
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" type="text/css" href="styles/main.css">
<title>Startseite</title>
</head>
<html>
<body>
<div id="container">
<article>
<div class="collage" id="cg">
<a href="#">
<div class="text">
<h2>CG-Projekte</h2>
<p>
Computergerenderte Projekte, basierend auf der Open-Source-Software 'Blender', sowie Tutorials für einige der Projekte.
</p>
</div>
</a>
</div>
</article>
</div>
</body>
</html>
Use the first part for general purposes.
body: font-size so I can scale all em elements with one value (mobile)
#container: Placed in the middle, positioned accordingly, slightly darker than the overall background. Pretty basic
article .collage: Display as table to make the image hover-over work properly (which it does even now)
#cg: The part that isn't working. I can change the background-color with this tag, but not the image
.text parts: Those are the designs for the hover-over part, they work as far as I can see. I am using opacity to make it invisible, until it is hovered over.
CSS-Styling:
*{
margin: 0;
padding: 0;
}
body{
font-size: 100%;
background-color:#2B2B2B;
}
#container{
margin: 0 auto;
margin-top: 100px;
min-height: 50em;
min-width: 70em;
max-width: 80em;
background-color: #2A2A2A;
border: 2px solid white;
}
article .collage {
display: table;
height: 500px;
width: 700px;
margin: 100px 0 0 5px;
border: 1px white solid;
}
#cg{
background: url("cg_collage.jpg");
}
article div .text{
height: 400px;
width: 800px;
background: rgba(0,0,0,0.55);
position: relative;
top: 0;
left: 0;
vertical-align: middle;
display: table-cell;
opacity: 0;
transition: all ease-in 0.1s;
}
article .collage a{
text-decoration: none;
}
article .collage .text{
padding: 0 10px 0 10px;
}
article .collage .text h2{
text-align: right;
text-decoration: none;
color: #ADFF5C;
line-height: 70px;
font-size: 40px;
font-family: monospace;
border-bottom: 3px ridge #FFFFFF;
line-height: 50px;
}
article .collage .text p{
text-align: right;
font-family: Arial, Helvetica, sans-serif;
margin-top: 5px;
color: #ADFF5C;
}
article div:hover .text{
opacity: 1;
}
Folders
As I said: I can change the background color fine, hover-over works perfectly. The only thing that won't work is the background-images. Images work fine if I embed them in the html-file.
I can't figure it out and a different viewpoint might find the 'Error 30' ;)
All of the other answers are correct, in the sense that your paths are not correct. The reason why this is happening is b/c your CSS file is in, I'm assuming, the "styles" folder, and when you reference your image, the path is assuming that the image is in the same folder as your CSS file.
Instead of using ".." to "back out" of a folder, it's always a best practice to use relative paths. Reason being, if you move files, folders, etc, then the path will always be correct.
Hence, instead of using background: url('../cg_collage.jpg'), you should use background: url('/cg_collage.jpg'). The "/" at the beginning tells the file(s) to look at the root and start from there. So rather than always counting how many folder structures you need to "drop back", use relative paths.
Also, a good practice is to always have your images in a folder, and name that folder appropriately (eg - "img" or "images" or w/e).
Helpful article on absolute and relative paths.
You have to change your CSS:
#cg{
background: url("cg_collage.jpg");
}
To:
#cg{
background: url("../cg_collage.jpg");
}
This is because your image is outside styles folder (where your stylesheet is).
I am not sure but CSS is looking for image file in its direcotry (styles). Try this one:
#cg{
background: url("../cg_collage.jpg");
}
You code works perfectly, when the file cg_collage.jpg is in folder /styles. Is it there in your project?
I am using Google Website Translator but when I translate the page to another language, a drop down appears on top of the browser causing all my content of my website to go down except for the background image.
My website is http://www.trialwebsite.comze.com/Index.html
You can check it and can view my source to know the problem. The code for the body and background photo is:
body {
margin: 0;
padding: 0;
color: #555;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 20px;
background-color: #fff;
background-image: url(images/templatemo_header.png);
background-position: top;
background-position:inherit;
background-repeat: repeat-x
}
You can move the background outside the body, so it becomes a DOM element who google translate can move too.
insert this this just below your <body> tag:
<div class="background"></div>
Then add this to your stylesheet:
.background {
background-image: url(images/templatemo_header.png);
height: 188px;
position: absolute;
width: 100%;
}
EDIT: And remove the background property from body css rules.
Try adding the following styles to your website's stylesheet:
.skiptranslate {display: none !important;}
This should hide the bar that Google places on your website after the translation finished.