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.
Related
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'm trying to scale the background color. I'm having the nav bar and I want the color to be from the nav bar to the bottom.
I've tried using:
background-size: 80px 60px;
Which doesn't work because it is still filling the page for 100%. Also for everyone to know i'm using bootstrap.
This is the css from bootstrap:
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #F5F5F5;
}
These are my css rules which override the bootstrap css files.
body {
background-size: 80px 60px;
background-repeat: no-repeat;
}
The nav bar is allways has a margin of 15% left and right so the width that the bg color has to be is 70%. The top margin is 0 because that it is following the image at the top.
If i've forgot to give information my apalogies and I will add the needed information asap.
you cannot size a background-color, but you can give a specific size to a gradient which is treated as a background-image.
here's what you could do:
http://jsfiddle.net/JkhCs/
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color:transparent;
background-image: -webkit-linear-gradient(red, red);
background-image: linear-gradient(red, red);
background-size:80px 80px;
background-repeat:no-repeat;
}
Do you know backgroud-size:cover and backgroud-size:contain?
Check it out at css3.info or W3Schools, it’s fantabulous.
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..
So, I'm trying to make the background image static, and have the foreground content move over it. Having some issues, what am I doing wrong? Here is my current code.
body
{
color: #000;
margin: 10px 0px 10px 0px;
background-color: #ffffff;
background-image:url('http://userlogos.org/files/backgrounds/Mafia_Penguin/Map1280x800.jpg');
background-repeat:no-repeat;
font-family: Arial, Helvetica, sans-serif;
}
You need to set the background-attachment property to fix the background image.
background-attachment: fixed;