i have this image in the background:
http://yoursdproperty.com/templates/pjo_joomlaforall/images/bgr.png
of this page:
http://yoursdproperty.com/index.php?option=com_jumi&fileid=8&Itemid=34
how do i remove it?
i understand that if i remove it the page will just be white in the background correct? if not, what do i need to do to get rid of the gray and white and just make it white?
If you change the following style you should get what you want:
#background_right {
/*background:transparent url(../images/bgr.png) no-repeat fixed center top;*/
background-color:white;
margin:0;
padding:0;
}
Just remove or outcomment the particular CSS line responsible for this. Or am I thinking too simple about this problem? If so, then please elaborate more about the context of the problem. If it is for instance an autogenerated stylesheet which you don't have control over, then best what you can do is to grab JavaScript (jQuery?) to remove/override the background image in the particular style class.
Edit: if you rather want a white background, then you'll need to get rid of the .body_background class as well.
Related
There is a black space where the IOS status bar is. I cannot figure out how to get that space to fill up using CSS.
Here [1] is a screenshot of how it looks on an iPhone when the webpage is loaded.
The status bar space does not inherit/match the background image or the background color.
This is the code down below that I have for the background image.
body{
font-family: 'Inconsolata', monospace;
background: url("./Components/Images/back.png");
background-repeat: no-repeat;
background-size: cover;
position: relative;
} ```
[1]: https://i.stack.imgur.com/y3Lwp.jpg
https://www.youtube.com/watch?v=plOl7TNc89A
I'm not sure what your exact issue is since you didn't provide a working example (please update if this doesn't solve it), but it sounds a lot like the issue desribed in the video above. tl;dr is that images are inline elements by default and they put a default buffer below them to allow them to line up with the main parts of a line of text and not the parts of text that drop below the line on which text is written. To fix this, you can override the default display and use
display: block
for your individual img element to remove space below the image.
Some other problems could be the presence of margin or padding on your element (set those to 0, if needed) or the way the image is saved. Re-save the image from your image software using save as an not as save for web.
also, I'm not sure what your exact issue is but if it is concerned with the default spaces in css please add
*
{
box-sizing:border-box;
padding:0;
margin:0;
}
to reset default properties I hope this helps
i am totally new in web design, and i am right now struggling with creating part of my website, i need to somehow make this happen:
When PART of the BODY BACKGROUND is HOVERED, make the background change to "B", and when the mouse is not over that part, I need it to change back to background "A".
I have seen some examples here but as i am a beginner, i have no idea how to use javascript, if you could please give me some light here, either on pure CSS or on how to apply javascript.
THIS is what i have so far: ( i tried using javascript) jsFiddle
body {
background-image:url(http://s5.postimg.org/6qbplw2xj/Background_main.jpg);
background-position:top center;
background-repeat: no-repeat;
background-color:black;
height:800px;
width:800px;
}
and THIS is what i wanted to show up when the COCONUT is HOVERED:
http://jsfiddle.net/AGbRH/2/
This works, (Of course the hover div doesn't fit perfectly on the fruit)
<li>...</li>
In your previous example, you've never closed a "li" tag. Remeber, always close them.
OK, sorry...this is kind of a basic CSS question but it's driving me crazy. I'm self-taught so I'm sure I am just missing something simple.
Site: http://notes.benadelt.com
The logo image sprite is just a home link...I'm trying to remove that background color that you can see is ruining the transparency of the image:
<a class="ben-logo" href="/"></a>
You can see that CSS gives any links in that section a light background-color, which is being applied to the image sprite as well. I'm trying to remove that background color from my image, but not from the body links, and cannot figure it out. Using dev tools I can only impact the style using:
header .words a { background: none; }
But that obviously removes the background from ALL links, so it also removes my image background in the sprite.
Figured there would be something I could add after the background URL to do this, such as:
background: url(http://www.benadelt.com/notes/wp-content/uploads/2013/04/Ben-Logo-Sprite.svg) none;
When you hover, it looks like I want it to look normally without that darn background-color.
Any help would be appreciated!
Ben
header .words a.ben-logo { background-color: transparent; }
The above code will target only the logo link. By setting the background colour to transparent, you leave the image itself (and all the other background properties!) intact.
Edit: One thing - I believe you already have transparent set on that background image by virtue of not specifying a colour (transparent is the default). What is probably happening in your case is that the a.ben-logo declaration comes before the .words a declaration in your stylesheet, so it's being overridden. The reason the above code should fix it is because the extra class names add more specificity. Here is Andy Clarke's specificity cheat sheet for you to peruse: http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg
This is my issue.
I have a menu using an image sprite, the image has transparencies, but when I add a :hover, it works, but I am still able to see the original image at the end.
Is there a way to make the hover show the image that I want and REPLACE the original one?
Thanks,
Marco
You can replace an image by using it as a background-image instead of using the <img> tag.
But most of the times, this is slow and another way is maybe good practice:
Create an image that has the :hover image next to it [img|hoverImg]
Do a styling with background-position to change the background.
Like this:
.menuItem
{
background-image: url('hello.jpg');
width:100px;
height:30px;
}
.menuItem:hover
{
background-position: 100px; /* Or whatever measure your image is */
}
The problem with this, is that the image size is fixed. You really have to specify it, instead of just doing this with an image.
I like this as the best way. If you want to set the src in your <img>, this can be done with Javascript, but is much heavier most of the time, because you have to load an extra image from the server.
I'd like to be able to add a class to images that adds a border that makes them look like a stack of photos. Anyone know how to do this?
Clarifications: Ideally something like the stack shown here but it doesn't need to be interactive and only needs to work for a single photo. I also don't mind using javascript if needed (jQuery would be preferred though).
The "depth" affect is probably going to be some type of drop shadow. Do you need to rotate the photos as well for the "messy photo pile" effect or are you looking for a "neatly stacked" look?
The "messy photo pile" effect seems to me to break down into three components:
Put a background behind the image for the "polaroid" look (explained in other comments
Put a drop shadow behind the image for the "depth" effect (explained above and in other comments
Rotating images. I've never done this myself but it looks like someone has coded the Jquery plugin you are looking for.
Place your IMG tag inside a nested set of DIV elements (the number of divs will determine the number of photos in the stack). Then use CSS to set the border and padding so that the DIV elements get progressively larger than the photograph. Generally you will add more padding to the bottom and right.
CSS3 it's supported by everyone yet, but you might want to look into border-image.
Put a div around the image and then have 2 styles defined.
<div class="img-shadow"><img ...></div>
.img-shadow {style.css (line 456)
background-color:#505050;
float:left;
margin:5px 0 0 0;
}
.img-shadow img {style.css (line 461)
background-color:#FFFFFF;
border:3px solid #000000;
display:block;
margin:-8px 8px 8px -8px;
padding:10px;
position:relative;
}
in the .img-shadow class, define a graphic for your background that's large enough for your images, and looks like a stack of photos. The above makes it look like the photo is casting a shadow.
Below is my recommendation which has a clear and simple CSS which results in a perfect photo stack.
http://dabblet.com/gist/2023431