473,721 Members | 4,001 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Anchoring Background-Image to Different Part of Container

By default, background images are anchored to their containers at the
top left corner of both. Is there a way to anchor them to another
corner, say the top right corner of the container=the top right corner
of the background-image?

Thanks,
Jamie

Feb 12 '07 #1
6 2278
Rik
On Mon, 12 Feb 2007 20:10:34 +0100, Jamie Jackson <my******@gmail .com
wrote:
By default, background images are anchored to their containers at the
top left corner of both. Is there a way to anchor them to another
corner, say the top right corner of the container=the top right corner
of the background-image?
CSS:

background-position: [ [<percentage| <length>]{1,2} | [ [top | center |
bottom] || [left | center | right] ] | inherit
So in your case:
background-position: top right;
--
Rik Wasmus
Feb 12 '07 #2
On Feb 12, 2:18 pm, Rik <luiheidsgoe... @hotmail.comwro te:
On Mon, 12 Feb 2007 20:10:34 +0100, Jamie Jackson <mySpa...@gmail .com>
wrote:
By default, background images are anchored to their containers at the
top left corner of both. Is there a way to anchor them to another
corner, say the top right corner of the container=the top right corner
of the background-image?

CSS:

background-position: [ [<percentage| <length>]{1,2} | [ [top | center |
bottom] || [left | center | right] ] | inherit

So in your case:
background-position: top right;
--
Rik Wasmus
Thanks, Rik

Feb 12 '07 #3
Rik wrote:
>
background-position: top right;
That should be
background-position: right top;

The x-axis is always first.

--
Berg
Feb 12 '07 #4
Bergamot schrieb:
Rik wrote:
>background-position: top right;

That should be
background-position: right top;

The x-axis is always first.
No. See <http://www.w3.org/TR/REC-CSS2/about.html#prop erty-defs>:

* A double bar (||) separates two or more options: one or more of them
must occur, in any order.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)
Feb 13 '07 #5
Johannes Koch wrote:
Bergamot schrieb:
>>
background-position: right top;

The x-axis is always first.

No. See <http://www.w3.org/TR/REC-CSS2/about.html#prop erty-defs>:

* A double bar (||) separates two or more options: one or more of them
must occur, in any order.

Hmmm...
background-position: 50% 100%;

Maybe using keywords doesn't matter, but for numeric values it most
definitely does.

--
Berg
Feb 13 '07 #6
Bergamot schrieb:
Maybe using keywords doesn't matter, but for numeric values it most
definitely does.
Yes, see the production rule in Rik's post that you responded to.

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)
Feb 13 '07 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

12
6733
by: Stanimir Stamenkov | last post by:
Here are two cases regarding inline-level elements' line-height, padding and background, which I doesn't understand: <div style="background: black; color: white; line-height: 1.5"> <span>Abc</span> <span style="background: white; color: black; line-height: 3">Abc</span> <span>Abc</span> </div>
1
2289
by: CMAR | last post by:
I have a design of a frameless page on my practice website: http://home.ne.rr.com/thespar/designerN.htm The idea is to have a #left navigation bar which is absolutely positioned and which contains a series of vertical placed unordered lists of links. To the right of the #left navigation bar is the #content section. I want the background in the #left section to extend to the bottom of the browser window.
1
1436
by: Brian Conway | last post by:
I have a webform that I have a datagrid on that I want a button at the bottom of the grid to maintain its position with the datagrid, if the grid grows large then button needs to move down with it, and if it is smaller it needs to move up. Everything regarding anchoring that I have found is with Windows Forms, is there any way to do this with a Web Form?
3
12244
by: Mad Joe | last post by:
Hi! I have a window form that contains 4 elements (2x2) on one panel. Those 4 elements are GroupBoxes of the exact same size, sorted like this: groupBox1 groupBox2 groupBox3 groupBox4 While resizing a Form window manually, I would like to resize automatically each groupBox by keeping the same ratio: Width of each groupBox = 50% of Panel-width
2
2859
by: bissatch | last post by:
Hi, I am running a w3c CSS validation check on a site in development. I have many errors saying that my CSS is not valid because I have not defined the background-color but instead left it default transparent. Why does it require that every CSS defined element have their background-color defined? Also, when I set styles in the following way:
0
1313
by: daveryan78 | last post by:
Hi all, I've been getting a strange problem with anchoring on my forms. I have a form where I put on a tabControl. I set it's anchoring to Top, Bottom, Left, Right. I put a number of tabPages on to the control. On the first tab I put textBoxes and comboBoxes. I set all their widths to 655 and their anchoring to Top, Left, Right. When I run the app, the form appears and all the textboxes and comboBoxes have truncated from the right, the...
3
1700
by: Steve | last post by:
I have two group boxes containing labels and textboxes that are next too each other. I want the group boxes and labels and textboxes to remain portionally the same as the form is resized. I've set the group boxes to be anchored left, right, top, and bottom, the labels to be left, right, top, and the textboxes to be anchored left, right,top, and bottom. But when I try to manually resize the form, the group boxes overlap. How do I get...
3
10248
by: marfi95 | last post by:
My application consists of basically a treeview on the left side, along with a panel control that takes up the right side. When nodes are clicked on the left, the data on the right side of the panel is changed based on that type. What I'm using are usercontrols, so I can do the visual design of them in a separate window. when the node is clicked, I assign the parent of the usercontrol to the panel control that is on the right side of...
1
14559
by: sklett | last post by:
I've read several articles/blogs/threads about anchoring/docking child controls in a FlowLayoutPanel. It sounds like it *should* work, but I can't get it to work for the life of me. Jon Skeet: I've created a short and complete sample to illustrate the problem. Beat you to it! :0) I would really appreciate if anyone could take a look at this and tell me what the magic trick is to make this work. All I want is to have the child...
0
8851
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9373
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9227
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9143
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9077
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
6676
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5992
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4497
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
3202
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.