I have been scratchingmy head about why the background image function is not working for me. Any suggestions? Yes I already know that Im a dumbass with severe attention problems..
<head>
<style type="text/css">
<!-- As you can see below, i tried to include a header image in 3 different ways -->
header {height:200px; background-url:(http://i.imgur.com/HtAvI.jpg) ; }
#header-wrapper { width:660px; margin:0 auto 10px; border:1px solid $bordercolor; background:url(http://i.imgur.com/HtAvI.jpg) no-repeat; height:400px; }
#header{background image: url(http://i.imgur.com/HtAvI.jpg);}
<!-- i tried including it in the body as well, to no avail -->
body { background image: url(http://i.imgur.com/HtAvI.jpg) ; }
p {color: red}
</style>
</head>
<body>
<p>this is text</p>
</body>"
Change background image: to background-image:. Also there is no property like background-url
There is no background-url. There is no background<space>image. There is background-image and there is background.
Once you fix those problems the images should display correctly.
Related
I am trying to make a CSS sheet inside an HTML document to change the background
image of a link.
You can make CSS make it so if you have your mouse go over something it can like change its color
<!DOCTYPE html>
<html>
<head>
<style>
#a1:link, #a1:visited {
background-color:red;
padding: 15px 25px;
text-decoration: none;
}
#a1:hover, #a1:active {
background-color:green;
}
</style>
</head>
<body>
<a id="a1" href="home.html">
</a>
</body>
</html>
Is there a way to instead doing a color can you do an image?
I have tried
background-image:url('locationtoimage.jpg')
and it just makes the link disappear. I did change both
background colors to background-image and I did the proper format and things but it wont work? I have tried googling it but everyone just asks for like buttons to things but I am dealing with links.
Sorry if this was already answered somewhere else. I tried looking but I cant find anything. I am really sure that this is possible and simple and I might just be over looking something. Here is what I have.
<!DOCTYPE html>
<html>
<head>
<style>
#a1:link, #a1:visited {
background-image:url('media.jpg');
padding: 15px 25px;
text-decoration: none;
}
#a1:hover, #a1:active {
background-image:url('home.jpg');
}
</style>
</head>
<body>
<a id="a1" href="home.html">
</a>
</body>
</html>
this works though
<!DOCTYPE html>
<html>
<head>
<style>
#a1 {
width: 200px;
height: 200px;
}
#a1:link, #a1:visited {
background-image:url('imageatasite');
padding: 15px 25px;
text-decoration: none;
}
#a1:hover, #a1:active {
background-image:url('imageatasite');
}
</style>
</head>
<body>
<a id="a1" href="home.html">
</a>
</body>
</html>
but I am not using an image online im using one that is in my html folder
but it wont work?
Try googling an image and pasting that in the background image url to see if it's defientley not the file.
Failing that I would suggest to use a separate div wrapper to wrap the images. And on :hover use display none to hide the image you don't want to see on hover.
Then you can set the image to be 100% that of the div.
Check the file extension too just to be sure.
I dont fully understand what the problem is but other images do work. The images I wanted to use were the same file extension in the same folder but I took a snapshot of them and now they work just fine. Thank you for helping guys I think all is well now.
I have a space at the top of my website and in my stylesheet I am using the margin="0" and it should work, but does not.
This is a wordpress theme website and I looked at my page source and found the style code below which I assume was generated by wordpress, but I cannot find it anywhere to edit it.
<style type="text/css" media="screen">
html { margin-top: 32px !important; }
* html body { margin-top: 32px !important; }
#media screen and ( max-width: 782px ) {
html { margin-top: 46px !important; }
* html body { margin-top: 46px !important; }
}
</style>
Please explain how I can do this?
Don't declare any styles directly to body/html tags,after body tag open one new div tag and close it before body tag close then you declare margin for that div,see the below example.
<html>
<head>
<body>
<div class="container">
</div>
</body>
</head>
</html>
.container
{
margin-top: 32px;
}
UPDATED:
I have found out this : margin: 0 auto; in the body {} block of the style sheet makes the header move. If I remove it, the banner header picture moves to the right. So that piece of line is the culprit. Does anybody know why?
As I have progressed (somewhat in the mystery) the question goes the other way.
I have this header file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<link rel="stylesheet" href= "<?php echo base_url() ?>css/main_style.css" />
<link rel="stylesheet" href= "<?php echo base_url() ?>css/webform.css" />
</head>
<div id="header" class = "header"><h1 class="header">Real Estate Worldwide</h1> </div>
<body>
Which connects to this View file (I am on MVC)
The code in the view has nothing to do with the issue, I asked so we'll skip it.
Then I have this Style sheet.
<style type = "text/css">
::selection{ background-color: #E13300; color: white; }
::-moz-selection {background-color: #E13300; color: white; }
::webkit-selection{ background-color: #E13300; color: white; }
body {
background:url('../assets/uploads/miweb/gradient2.png');
background-repeat:repeat-x;
margin: 40px;
font: 13px/20px normal Helvetica, Arial, sans-serif;
color: #4F5155;
width:600px;
height:500px;
margin: 0 auto;
}
#header {
float:center;
background: url("../jq185/css/start/images/ui-bg_gloss-wave_75_2191c0_500x100.png") repeat-x scroll 50% 50% #2191C0;
font-family: 'trebuchet ms',geneva,arial,tahoma,sans-serif;
font-size: 10px;
margin: 0 auto;
margin-top: 2px;
padding: 0;
width: 1050px;
h2 {color:#ffffff;}
}
.header {
color:#ffffff;
}
ISSUE:
If I remove the 3 selection ::selection lines from the style sheet, the gradient effect, from the background body disappears.
If I leave it there, then the gradient effect works but then the #header jpg file that you see down the style sheet changes its position from the centered marging: 0 auto; to the right.
You have the full code there. I am puzzled as hell, because I cannot understand why something like ::selection would have a radical effect on the code snippet that refers to body {} where the call to the gradient picture is and also affects the font style within that body {}
II UPDATE
Here is the Controller
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Home_c extends CI_Controller {
function __construct()
{
parent::__construct();
$this->load->model('home_model');
}
public function index ()
{
$this->load->view('header');
$this->load->view('home');
}
public function load()
{ $this->load->view('header');
$data['paises'] = $this->home_model->devolverPaises();
$data['ofertas'] = $this->home_model->devolverOfertas();
I wouldn't be surprised if the strange effects you're seeing are tied to not having proper markup.
EDITED: As I made comments, I realized the may not have been clear enough for OP.
Your HTML structure needs to be valid, to start with:
<!DOCTYPE html >
<html>
<head>
<!-- title, meta, styles, etc go here -->
</head>
<body>
<!-- all your other content goes here -->
</body>
</html>
Make sure that when your page renders in the browser, when you look at View Source, you see those container elements in their proper places, nested as such. Better yet, run your page through a validation service. (http://validator.w3.org/ for example)
You have invalid CSS:
#header {
float:center; /* no such attribute... only left, right, none, or inherit */
h2 {color:#ffffff;} /* you can't nest tags inside other specs, except with the use of pre-processors like SASS or LESS */
}
I am trying to set up a basic layout where the header and footer carry on across the width of the page no matter what resolution the user is set to.
I have managed this but now I am having a problem where the main container div will not expand properly height wise to encompass the divs within. It seems to expand to only a certain height and then goes no further, no matter what height or min-height style you change.
Here is the basic structure:
<div id="page">
<div id="content">
</div>
</div>
<div id="footClear"></div>
<div id="footer">
</div>
The footer code is to force the footer to stick to the bottom of the page no matter the height of the main container (id="page")
My CSS for these parts is:
#page {
margin:0 auto;
width:1000px;
background:red;
padding:0px;
min-height:100%;
position:relative;
margin-bottom:-47px;
}
#content {
}
#footer {
width:100%;
height:22px;
position:relative;
margin:0 auto;
background:#000000;
text-align:center;
padding-top:3px;
font-size:12px;
}
#footClear {
height:22px;
clear:both;
}
A link to what to my site is here if you want to have a look: www.therapyoracle.co.uk/new
You can see the page div is in red, and does not carry on down the page.
On your live site, #page has height: 100% set, which is causing the problem.
It's coming from your ie6.css! This is how you're trying to make it load in only IE6:
<!—[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="assets/css/ie6.css" />
<![endif]—>
The hyphens in the HTML above are wrong. Replace that HTML with this:
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="assets/css/ie6.css" />
<![endif]-->
And ie6.css will then only be loaded in IE6, instead of all browsers, and your problem will be fixed.
If you take the height out of you body this will fix it for you as below
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 14px;
padding: 0;
margin: 0;
}
Delete margin-bottom:-47px; and delete #page {height: 100%;} in ie6.css
I'm writing code in Stylish, a firefox plugin, to change the image that is showing up.
The image property doesn't have a div tag, so I have to use this:
img[src*="s_dschjungelplanet"]{
##########
}
So this will replace "s_dschjungelplanet" anywhere in the page, in a img src.
So my main problem is that I'm not sure HOW to tell it to replace the src="xxx".
Ta for replies
There is no easy way. I think you'd be better of with greasemonkey scripts, as with a simple such script you can change the url.
As far as I know, you can not change the url with css only. This was the closest I was able to come with css only:
img[src*="s_dschjungelplanet"]{
width:0;
height:70px;
padding-right:250px;
background:transparent url(http://i.stackoverflow.com/Content/Img/stackoverflow-logo-250.png) top left no-repeat;
}
You can try this:
img[src*="s_dschjungelplanet"]{
content: url("myfavorite.png");
}
Works in Chrome, not in Firefox...
img[src*="http://url-of-image-to-be-replaced.jpg"]{
background-image: url("https://url-of-image-you-want-to-display.jpg");
width:38px;
display:inline-block;
padding:38px 0 0 0;
height: 0px}
Change the width and padding to your specs. It's worked for me.
replace the img src
.image-replacement {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(https://www.whatsappimages.in/wp-content/uploads/2021/07/Top-HD-sad-quotes-for-whatsapp-status-in-hindi-Pics-Images-Download-Free.gif)
no-repeat;
width: 180px;
height: 236px;
padding-left: 180px;
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Image replaced with Image</h2>
<img class="image-replacement" src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80" />
</body>
</html>