I was looking at ways to include a title in a page and I have come across this website: (see image below) which does exactly what I want but I can't figure out how to accomplish it. The trouble I have is in only having a single title image at the top without it repeating through to the bottom. I have used the css background-image:url(image) on the main div but the repeating image problem is present. Any help or insight on this matter will be greatly appreciated.
EDIT: I need the rest of the background to repeat until the end. I think having the rest of the background be a separate image may be part of the solution but I don't know if a title image div can be forced to the same layer. Again any insight is valuable as I am new to HTML and CSS. Also this is the best example website I can find, if you are offended please edit with a better example. Thank You!
You can get it done using the below CSS,
#elemId
{
background: #00ff00 url('testimage.jpg') no-repeat top left;
}
Hope it will help
background-repeat:no-repeat;
This is the css trick to NOT repeat a background image.
If you didn't know this already, how the hell could you make it to this website ?
from you link
body {
background: none repeat scroll 0 0 #000000;
color: #FFFFFF;
font-family: Helvetica,Arial,sans-serif;
margin: 0;
padding: 0;
}
#wrapper {
background: url("/marines-theme/images/layout/body-background.jpg") repeat-x scroll left 23px rgba(0, 0, 0, 0);
margin: 0 auto;
min-width: 980px;
overflow-x: hidden;
}
#overview-wrap {
background: url("/image/image_gallery?uuid=a394504c-a638-449e-bb56-b517cfe7d3ee&groupId=10162&t=1349957392552") no-repeat scroll center top #000000;
}
Those are nested markups like so :
<body>
<div id="wrapper">
<div id="overview-wrap"></div>
</div>
</body>
That's about it.
ps. i added a screenshot of what you want to show. Can you remove the (now useless) link?
Related
Just started web dev, and I want to reproduce this navbar style.
Can anyone help me with just how to stylishing navbart list item for one element? I'll try to learn how to to this. Thanks
PS: to be more helpful, if it's possible to do it with sass syntaxe, it will be great. Thanks again xD
It is really simple! Simply add some divs into your nav. And style it accordingly. I didn't include the icons you can easily find them. The rainbow border on the bottom can also be set to stripes, check out this website: https://stripesgenerator.com
body {
margin: 0;
background-color: #f0f0f0
}
nav {
width: 80vw;
background-color: white;
margin: auto;
/* Border bottom */
border-bottom: 2px solid green;
border-image-source: linear-gradient(to right, gray, red, orange, yellow, green, lightblue, darkblue);
border-image-slice: 20;
}
div {
display: inline-block;
padding: 10vh 2.4vw;
}
<nav>
<div>Home</div>
<div>Dex</div>
<div>Apps</div>
<div>Trading</div>
<div>TV</div>
<div>Play</div>
<div>News</div>
</nav>
they probably use flexbox to do this.
I recommend the very useful website CSSTRICKS to see what it is ;)
you can see inside the code of the page with a right click then "inspect" to see everything on their html and css.
I have being wondering thinking what do one achieve this type of background in css for quite a while now. It's an image background, yet the image does not seem to be there. You cant download the image and cant drag it along. Please see the Pink stylish image background here . How can I achieve that? Or can some one help me with the feature name? Or perhaps a good link where I can learn or see the example on that? I just try googling but don't know what it's call. Another example is the chinese new year background Here.
Its a background-image:
New year:
.homepage-background-cny {
background: url("../../img/cny.jpg") no-repeat scroll right top transparent;
}
Etsy:
#seasonal-hero {
background: url("//img0.etsystatic.com/site-assets/homepage-carousel/valentine-gift-hero-v3.jpg") repeat scroll center center #FEEEEF;
width: 100%;
height: 400px;
min-width: 1030px;
cursor: pointer;
position: relative;
}
Background images usually cannot be dragged, the source of the elements background can be found with the inspector:
JSFiddle Demo
div{
height:300px;
background: url('http://lorempizza.com/1000/500');
}
<div>Background-Image</div>
They're just CSS background images:
Demo
HTML
<div id="container">
This is the content.
</div>
CSS
#container {
padding: 10px;
min-height: 600px;
width: 100%;
background: url(//img0.etsystatic.com/site-assets/homepage-carousel/valentine-gift-hero-v3.jpg) repeat-x;
}
In CSS you use the background-image rule:
background-image: url("//img0.etsystatic.com/site-assets/homepage-carousel/valentine-gift-hero-v3.jpg");
this is the one on the page you link uses.
Best,
Michael
So I have probably an easy question to answer...
I am working on the site fairhopemicrocottages.com, and on the "About" page, the bullet points using the "li" tag are not aligned properly.
I want the bullet points to be on the first word, not in the middle of the 2 sentences. Very annoying.
This is definitely caused by the fact that I took this site design from another site I found, and worked around the CSS, but cannot edit the CSS. (Or can I?)
If someone can help me with a work around to solve this problem, that would be great! Thanks!
Bonus question: On the front page, I like the picture I found, however it does not blend in well with the navbar text and my image, the text is hard to see for old people like my parents.
Is there a work around to change the color of that section at the top to black? Just so the text and image can be read easily?
On line 56 in your stylesheet is something like this:
li {
background: black url("../img/list.png") no-repeat scroll left center;
}
Change it to left top, and it moves it up:
background: black url("../img/list.png") no-repeat scroll left top;
But that's not good on your li's - they are too high then, so set a specific top like so:
background: url("../img/list.png") no-repeat scroll left 10px;
To fix the issue in your top nav to change it to black, just add background to that section:
#slideshow header, .black header {
border-bottom: 1px dotted rgba(255, 255, 255, 0.15);
position: relative;
z-index: 10;
background: black;
}
You are replacing default list bullets with a custom background and that background has a centered position, therefore:
li { background: url("../img/list.png") no-repeat left 11px; }
By replacing the left center with left 11px, your bullets will appear where you want them to.
Additionally, you could solve this by changing up your styles:
Add this style:
ul {
list-style: url("../img/list.png");
}
Remove this style:
li {
background: url("../img/list.png") no-repeat left center;
}
I want to show an Animated GIF while images loads and I want to do this using CSS. (eg: without JS if possible).
<img src="images/users/girl1.png" class="thumbnailPreLoader memberImage"/>
.thumbnailPreLoader {
background: url('/images/image-preloader.gif') no-repeat scroll center center #F9F9F9;
height: 101px;
width: 101px;
position: relative;
}
div#preferredMembers img.memberImage {
border: 1px solid #808080;
padding: 3px;
}
Above is what I'm currently working with and you can see this at www.datingjapan.co (set of 5 thumbnail images).
I'm currently finding I just don't see the GIF.
If I go into chrome developer mode and change the path of the img I can see the GIF then so I know the path etc are correct.
Is this possible? Is there a trick I'm missing? any help would be greatly appreciated.
Note: I know how to do this with jquery .load() but it would suit me much better to just attach a CSS class.
thx
try removing the scroll in background: url('/images/image-preloader.gif') no-repeat scroll center center #F9F9F9; It is not required here. It solved the issue in my chrome inspector...
I know this is probably the dumbest question ever, however I am a total beginner when it comes to CSS; how do you hyperlink an image on a webpage using an image which is sourced from CSS? I am trying to set the title image on my website linkable to the frontpage. Thanks!
Edit: Just to make it clear, I'm sourcing my image from CSS, the CSS code for the header div is as follows:-
#header
{
width: 1000px;
margin: 0px auto;
padding: 0px 15px 0px 15px;
border: none;
background: url(images/title.png) no-repeat bottom;
width: 1000px;
height: 100px;
}
I want to know how to make this div hyperlinked on my webpage without having to make it an anchor rather than a div.
You control design and styles with CSS, not the behavior of your content.
You're going to have to use something like <a id="header" href="[your link]">Logo</a> and then have a CSS block such as:
a#header {
background-image: url(...);
display: block;
width: ..;
height: ...;
}
You cannot nest a div inside <a> and still have 'valid' code. <a> is an inline element that cannot legally contain a block element. The only non-Javascript way to make a link is with the <a> element.
You can nest your <a> tag inside <div> and then put your image inside :)
If you don't want that, you're going to have to use JavaScript to make your <div> clickable:
Document.getElementById("header").onclick = function() {
window.location='...';
}
To link a css-sourced background-image:
#header {
display:block;
margin: 0px auto;
padding: 0px 15px 0px 15px;
border: none;
background: url(images/title.png) no-repeat bottom;
width: 1000px;
height: 100px;
}
<a id="header" href="blah.html" class="linkedImage">
The key thing here is to turn the anchor tag into a block element, so height and width work. Otherwise it's an inline element and will ignore height.
That's really not a CSS thing. You still need your A tag to make that work. (But use CSS to make sure the image border is either removed, or designed to your required spec.)
<img src="foo" class="whatever" alt="foo alt" />
EDIT: Taking original intent (updated question) into account, a new code sample is below:
<img id="header" alt="foo alt" />
You're still in an HTML world for links, as described by other answers on this question.
sorry to spoil your fun ladies and gentlemen, it is possible.
Write in your header: [link](http://"link here")
then in your css:
#header a[href="https://link here"] {
display: inline-block;
width: 75px;
height: 75px;
font-size: 0;
}
.side .md a[href="link here"] {
background: url(%%picture here%%) no-repeat;
}
then in your css
.titleLink {
background-image: url(imageUrl);
}
You still create links in HTML with 'a' (anchor) tags just like normal. CSS does not have anything that can specify if something is a link to somewhere or not.
Edit
The comments of mine and others still apply. To clarify, you can use JavaScript to make a div act as a link:
<div id="header" onclick="window.location='http://google.com';">My Header</div>
That isn't really great for usability however as people without JavaScript enabled will be unable to click that and have it act as a link.
Also, you may want to add a cursor: pointer; line to your CSS to give the header div the correct mouse cursor for a link.
CSS is for presentation only, not content. A link is content and should be put into the HTML of the site using a standard <a href=""> tag. You can then style this link (or add an image to the link) using CSS.
You have to use an anchor element, wrapped in a container. On your homepage, your title would normally be an h1, but then on content pages it would probably change to a div. You should also always have text in the anchor element for people without CSS support and/or screen readers. The easiest way to hide that is through CSS. Here are both examples:
<h1 id="title"><a title="Home" href="index.html>My Title</a></h1>
<div id="title"><a title="Home" href="index.html>My Title</a></div>
and the CSS:
#title {
position:relative; /*Makes this a containing element*/
}
#title a {
background: transparent url(../images/logo.png) no-repeat scroll 0 0;
display:block;
text-indent:-9999px; /*Hides the anchor text*/
height:50px; /*Set height and width to the exact size of your image*/
width:200px;
}
Depending on the rest of your stylesheet you may need to adjus it for the h1 to make it look the same as the div, check out CSS Resets for possible solutions to this.
Try this - use an H1 as the seat of your graphic instead. Saved my butt time and time again:
<h1 class="technique-six">
CSS-Tricks
</h1>
h1.technique-six {
width: 350px;
padding: 75px 0 0 0;
height: 0;
background: url("images/header-image.jpg") no-repeat;
overflow: hidden;
}
Accessible, and also solid across browsers IE6 and > . You could also link the H1.
HTML is the only way to create links - it defines the structure and content of a web site.
CSS stands for Cascading Style Sheets - it only affects how things look.
Although normally an <a/>; tag is the only way to create a link, you can make a <div/> clickable with JavaScript. I'd use jQuery:
$("div#header").click(function() {window.location=XXXXXX;});